From 14e290bf1a2b643cc65c863ea8ebcad93c76feea Mon Sep 17 00:00:00 2001 From: Subhash Halder Date: Sat, 20 May 2023 19:32:20 +0530 Subject: [PATCH 001/126] Added base structure for xychart --- cSpell.json | 1 + demos/index.html | 3 + demos/xychart.html | 33 ++++ .../src/diagram-api/diagram-orchestration.ts | 2 + .../src/diagrams/xychart/parser/xychart.jison | 143 ++++++++++++++++++ .../src/diagrams/xychart/xychartBuilder.ts | 5 + .../mermaid/src/diagrams/xychart/xychartDb.ts | 39 +++++ .../src/diagrams/xychart/xychartDetector.ts | 20 +++ .../src/diagrams/xychart/xychartDiagram.ts | 12 ++ .../src/diagrams/xychart/xychartRenderer.ts | 38 +++++ 10 files changed, 296 insertions(+) create mode 100644 demos/xychart.html create mode 100644 packages/mermaid/src/diagrams/xychart/parser/xychart.jison create mode 100644 packages/mermaid/src/diagrams/xychart/xychartBuilder.ts create mode 100644 packages/mermaid/src/diagrams/xychart/xychartDb.ts create mode 100644 packages/mermaid/src/diagrams/xychart/xychartDetector.ts create mode 100644 packages/mermaid/src/diagrams/xychart/xychartDiagram.ts create mode 100644 packages/mermaid/src/diagrams/xychart/xychartRenderer.ts diff --git a/cSpell.json b/cSpell.json index abcfa03830..a99be67da7 100644 --- a/cSpell.json +++ b/cSpell.json @@ -149,6 +149,7 @@ "vueuse", "xlink", "yash", + "xychart", "yokozuna", "zenuml" ], diff --git a/demos/index.html b/demos/index.html index 24c4fbf3b0..c634aad2d4 100644 --- a/demos/index.html +++ b/demos/index.html @@ -60,6 +60,9 @@

Pie

  • Quadrant charts

    • +
  • +

    XY charts

    +

  • Requirements

    • diff --git a/demos/xychart.html b/demos/xychart.html new file mode 100644 index 0000000000..3fffd379ab --- /dev/null +++ b/demos/xychart.html @@ -0,0 +1,33 @@ + + + + + + Mermaid Quick Test Page + + + + + +

    XY Charts demos

    + 
    +    xychart
+
    + +
    + + + + diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index 9c03e27f31..b4dd2fd958 100644 --- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts +++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts @@ -7,6 +7,7 @@ import gantt from '../diagrams/gantt/ganttDetector.js'; import { info } from '../diagrams/info/infoDetector.js'; import pie from '../diagrams/pie/pieDetector.js'; import quadrantChart from '../diagrams/quadrant-chart/quadrantDetector.js'; +import xychart from '../diagrams/xychart/xychartDetector.js'; import requirement from '../diagrams/requirement/requirementDetector.js'; import sequence from '../diagrams/sequence/sequenceDetector.js'; import classDiagram from '../diagrams/class/classDetector.js'; @@ -82,5 +83,6 @@ export const addDiagrams = () => { journey, quadrantChart, sankey + xychart ); }; diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison new file mode 100644 index 0000000000..d8e0d08d08 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -0,0 +1,143 @@ +%lex +%options case-insensitive + +%x string +%x string +%x md_string +%x title +%x open_directive +%x type_directive +%x arg_directive +%x close_directive +%x acc_title +%x acc_descr +%x acc_descr_multiline +%% +\%\%\{ { this.begin('open_directive'); return 'open_directive'; } +((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } +":" { this.popState(); this.begin('arg_directive'); return ':'; } +\}\%\% { this.popState(); this.popState(); return 'close_directive'; } +((?:(?!\}\%\%).|\n)*) return 'arg_directive'; +\%\%(?!\{)[^\n]* /* skip comments */ +[^\}]\%\%[^\n]* /* skip comments */ +[\n\r]+ return 'NEWLINE'; +\%\%[^\n]* /* do nothing */ + +title { this.begin("title");return 'title'; } +(?!\n|;|#)*[^\n]* { this.popState(); return "title_value"; } + +accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; } +<acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; } +accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; } +<acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } +accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} +<acc_descr_multiline>[\}] { this.popState(); } +<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value"; + + +["][`] { this.begin("md_string");} +<md_string>[^`"]+ { return "MD_STR";} +<md_string>[`]["] { this.popState();} +["] this.begin("string"); +<string>["] this.popState(); +<string>[^"]* return "STR"; + +" "*"xychart"" "* return 'XYCHART'; + +[A-Za-z]+ return 'ALPHA'; +":" return 'COLON'; +\+ return 'PLUS'; +"," return 'COMMA'; +"=" return 'EQUALS'; +\= return 'EQUALS'; +"*" return 'MULT'; +\# return 'BRKT'; +[\_] return 'UNDERSCORE'; +"." return 'DOT'; +"&" return 'AMP'; +\- return 'MINUS'; +[0-9]+ return 'NUM'; +\s return 'SPACE'; +";" return 'SEMI'; +[!"#$%&'*+,-.`?\\_/] return 'PUNCTUATION'; +<<EOF>> return 'EOF'; + +/lex + +%start start + +%% /* language grammar */ + +start + : eol start + | SPACE start + | directive start + | XYCHART document + ; + +document + : /* empty */ + | document line + ; + +line + : statement eol + ; + +statement + : + | SPACE statement + | directive + ; + + +directive + : openDirective typeDirective closeDirective + | openDirective typeDirective ':' argDirective closeDirective + ; + +eol + : NEWLINE + | SEMI + | EOF + ; + +openDirective + : open_directive { yy.parseDirective('%%{', 'open_directive'); } + ; + +typeDirective + : type_directive { yy.parseDirective($1, 'type_directive'); } + ; + +argDirective + : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); } + ; + +closeDirective + : close_directive { yy.parseDirective('}%%', 'close_directive', 'quadrantChart'); } + ; + +text: alphaNumToken + { $$={text:$1, type: 'text'};} + | text textNoTagsToken + { $$={text:$1.text+''+$2, type: $1.type};} + | STR + { $$={text: $1, type: 'text'};} + | MD_STR + { $$={text: $1, type: 'markdown'};} + ; + +alphaNum + : alphaNumToken + {$$=$1;} + | alphaNum alphaNumToken + {$$=$1+''+$2;} + ; + + +alphaNumToken : PUNCTUATION | AMP | NUM| ALPHA | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ; + +textNoTagsToken: alphaNumToken | SPACE | MINUS; + +%% diff --git a/packages/mermaid/src/diagrams/xychart/xychartBuilder.ts b/packages/mermaid/src/diagrams/xychart/xychartBuilder.ts new file mode 100644 index 0000000000..b4bbdc31eb --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/xychartBuilder.ts @@ -0,0 +1,5 @@ +// @ts-ignore: TODO Fix ts errors +import { scaleLinear } from 'd3'; +import { log } from '../../logger.js'; + +export class XYChartBuilder {} diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts new file mode 100644 index 0000000000..968d1390da --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -0,0 +1,39 @@ +import { log } from '../../logger.js'; +import mermaidAPI from '../../mermaidAPI.js'; +import * as configApi from '../../config.js'; +import { sanitizeText } from '../common/common.js'; +import { + setAccTitle, + getAccTitle, + setDiagramTitle, + getDiagramTitle, + getAccDescription, + setAccDescription, + clear as commonClear, +} from '../../commonDb.js'; + +const config = configApi.getConfig(); + +function textSanitizer(text: string) { + return sanitizeText(text.trim(), config); +} + +export const parseDirective = function (statement: string, context: string, type: string) { + // @ts-ignore: TODO Fix ts errors + mermaidAPI.parseDirective(this, statement, context, type); +}; + +const clear = function () { + commonClear(); +}; + +export default { + parseDirective, + clear, + setAccTitle, + getAccTitle, + setDiagramTitle, + getDiagramTitle, + getAccDescription, + setAccDescription, +}; diff --git a/packages/mermaid/src/diagrams/xychart/xychartDetector.ts b/packages/mermaid/src/diagrams/xychart/xychartDetector.ts new file mode 100644 index 0000000000..d200adc591 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/xychartDetector.ts @@ -0,0 +1,20 @@ +import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; + +const id = 'xychart'; + +const detector: DiagramDetector = (txt) => { + return txt.match(/^\s*xychart/i) !== null; +}; + +const loader = async () => { + const { diagram } = await import('./xychartDiagram.js'); + return { id, diagram }; +}; + +const plugin: ExternalDiagramDefinition = { + id, + detector, + loader, +}; + +export default plugin; diff --git a/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts b/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts new file mode 100644 index 0000000000..590ceed289 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts @@ -0,0 +1,12 @@ +import { DiagramDefinition } from '../../diagram-api/types.js'; +// @ts-ignore: TODO Fix ts errors +import parser from './parser/xychart.jison'; +import db from './xychartDb.js'; +import renderer from './xychartRenderer.js'; + +export const diagram: DiagramDefinition = { + parser, + db, + renderer, + styles: () => '', +}; diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts new file mode 100644 index 0000000000..a4caacf524 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -0,0 +1,38 @@ +// @ts-ignore: TODO Fix ts errors +import { select } from 'd3'; +import * as configApi from '../../config.js'; +import { log } from '../../logger.js'; +import { configureSvgSize } from '../../setupGraphViewbox.js'; +import { Diagram } from '../../Diagram.js'; + +export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { + const conf = configApi.getConfig(); + + log.debug('Rendering xychart chart\n' + txt); + + const securityLevel = conf.securityLevel; + // Handle root and Document for when rendering in sandbox mode + let sandboxElement; + if (securityLevel === 'sandbox') { + sandboxElement = select('#i' + id); + } + const root = + securityLevel === 'sandbox' + ? select(sandboxElement.nodes()[0].contentDocument.body) + : select('body'); + + const svg = root.select(`[id="${id}"]`); + + const group = svg.append('g').attr('class', 'main'); + + const width = 500; + const height = 500; + + configureSvgSize(svg, height, width, true); + + svg.attr('viewBox', '0 0 ' + width + ' ' + height); +}; + +export default { + draw, +}; From 93697b74f44f1b0daf41e0f76373f9a2402ce446 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Thu, 8 Jun 2023 22:00:02 +0530 Subject: [PATCH 002/126] Generated the base architecture --- demos/xychart.html | 2 +- packages/mermaid/package.json | 2 + .../quadrant-chart/quadrantBuilder.ts | 1 - .../xychart/chartBuilder/Interfaces.ts | 151 ++++++++++++++++++ .../xychart/chartBuilder/Orchestrator.ts | 66 ++++++++ .../chartBuilder/TextDimensionCalculator.ts | 15 ++ .../chartBuilder/components/ChartTitle.ts | 89 +++++++++++ .../chartBuilder/components/Interfaces.ts | 8 + .../chartBuilder/components/axis/BandAxis.ts | 54 +++++++ .../components/axis/LinearAxis.ts | 55 +++++++ .../chartBuilder/components/axis/index.ts | 31 ++++ .../chartBuilder/components/plot/LinePlot.ts | 34 ++++ .../chartBuilder/components/plot/index.ts | 81 ++++++++++ .../diagrams/xychart/chartBuilder/index.ts | 77 +++++++++ .../src/diagrams/xychart/xychartBuilder.ts | 5 - .../mermaid/src/diagrams/xychart/xychartDb.ts | 21 ++- .../src/diagrams/xychart/xychartRenderer.ts | 95 ++++++++++- pnpm-lock.yaml | 62 ++++++- 18 files changed, 835 insertions(+), 14 deletions(-) create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts delete mode 100644 packages/mermaid/src/diagrams/xychart/xychartBuilder.ts diff --git a/demos/xychart.html b/demos/xychart.html index 3fffd379ab..6595b56737 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -25,7 +25,7 @@ <h1>XY Charts demos</h1> import mermaid from './mermaid.esm.mjs'; mermaid.initialize({ theme: 'default', - logLevel: 3, + logLevel: 0, securityLevel: 'loose', }); </script> diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index d04083baac..aa705532cd 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -82,6 +82,8 @@ "@types/d3": "^7.4.0", "@types/d3-sankey": "^0.12.1", "@types/d3-selection": "^3.0.5", + "@types/d3-scale": "^4.0.2", + "@types/d3-shape": "^3.1.0", "@types/dompurify": "^3.0.2", "@types/jsdom": "^21.1.1", "@types/lodash-es": "^4.17.7", diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts index 9c11627620..388d7a0283 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts @@ -1,4 +1,3 @@ -// @ts-ignore: TODO Fix ts errors import { scaleLinear } from 'd3'; import { log } from '../../logger.js'; import type { BaseDiagramConfig, QuadrantChartConfig } from '../../config.type.js'; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts new file mode 100644 index 0000000000..767a982627 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -0,0 +1,151 @@ +export enum ChartPlotEnum { + LINE = 'line', +} + +export enum ChartLayoutElem { + NULL = 'null', + CHART = 'chart', + TITLE = 'title', + XAXISLABEL = 'xaxislabel', + XAXISTITLE = 'xaxistitle', + YAXISLABEL = 'yaxislabel', + YAXISTITLE = 'yaxistitle', +} +export enum XYChartYAxisPosition { + LEFT = 'left', + RIGHT = 'right', +} + +export enum OrientationEnum { + VERTICAL = 'vertical', + HORIZONTAL = 'horizontal', +} + +export type ChartLayout = ChartLayoutElem[][]; + +export type VisibilityOption = { + chartTitle: boolean; + xAxisTitle: boolean; + xAxisLabel: boolean; + yAxisTitle: boolean; + yAxisLabel: boolean; +}; + +export interface XYChartConfig { + width: number; + height: number; + fontFamily: string; + titleFontSize: number; + titleFill: string; + titlePadding: number; + xAxisFontSize: number; + xAxisTitleFontSize: number; + yAxisFontSize: number; + yAxisTitleFontSize: number; + yAxisPosition: XYChartYAxisPosition; + showChartTitle: boolean; + showXAxisLable: boolean; + showXAxisTitle: boolean; + showYAxisLabel: boolean; + showYAxisTitle: boolean; + chartOrientation: OrientationEnum; + plotReservedSpacePercent: number; +} + +export type SimplePlotDataType = [string | number, number][]; + +export interface LinePlotData { + type: ChartPlotEnum.LINE; + data: SimplePlotDataType; +} + +export type PlotData = LinePlotData; + +export interface BandAxisDataType { + title: string; + categories: string[]; +} + +export interface LinearAxisDataType{ + title: string; + min: number; + max: number; +} + +export type AxisDataType = LinearAxisDataType | BandAxisDataType; + +export interface XYChartData { + xAxis: AxisDataType; + yAxis: AxisDataType; + title: string; + plots: PlotData[]; +} + +export interface Dimension { + width: number; + height: number; +} + +export interface BoundingRect extends Point, Dimension {} + +export interface XYChartSpaceProperty extends BoundingRect { + orientation: OrientationEnum; +} + +export interface XYChartSpace { + chart: XYChartSpaceProperty; + title: XYChartSpaceProperty; + xAxisLabels: XYChartSpaceProperty; + xAxisTitle: XYChartSpaceProperty; + yAxisLabel: XYChartSpaceProperty; + yAxisTitle: XYChartSpaceProperty; +} + +export interface Point { + x: number; + y: number; +} + +export type TextVerticalPos = 'left' | 'center' | 'right'; +export type TextHorizontalPos = 'top' | 'middle' | 'bottom'; + +export interface RectElem extends Point { + width: number; + height: number; + fill: string; + strokeWidth: number; + strokeFill: string; +} + +export interface TextElem extends Point { + text: string; + fill: string; + verticalPos: TextVerticalPos; + horizontalPos: TextHorizontalPos; + fontSize: number; + rotation: number; +} + +export interface PathElem { + path: string; + fill?: string; + strokeWidth: number; + strokeFill: string; +} + +export type DrawableElem = + | { + groupText: string; + type: 'rect'; + data: RectElem[]; + } + | { + groupText: string; + type: 'text'; + data: TextElem[]; + } + | { + groupText: string; + type: 'path'; + data: PathElem[]; + }; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts new file mode 100644 index 0000000000..d597569215 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -0,0 +1,66 @@ +import { DrawableElem, XYChartConfig, XYChartData } from './Interfaces.js'; +import { getChartTitleComponent } from './components/ChartTitle.js'; +import { ChartComponent } from './components/Interfaces.js'; +import { IAxis, getAxis } from './components/axis/index.js'; +import { IPlot, getPlotComponent, isTypeIPlot } from './components/plot/index.js'; + +export class Orchestrator { + private componentStore: { + title: ChartComponent, + plot: IPlot, + xAxis: IAxis, + yAxis: IAxis, + }; + constructor(private chartConfig: XYChartConfig, chartData: XYChartData) { + this.componentStore = { + title: getChartTitleComponent(chartConfig, chartData), + plot: getPlotComponent(chartConfig, chartData), + xAxis: getAxis(chartData.xAxis, chartConfig), + yAxis: getAxis(chartData.yAxis, chartConfig), + }; + } + + private calculateSpace() { + let availableWidth = this.chartConfig.width; + let availableHeight = this.chartConfig.height; + let chartX = 0; + let chartY = 0; + const chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100); + const chartHeight = Math.floor((availableHeight * this.chartConfig.plotReservedSpacePercent) / 100); + + let spaceUsed = this.componentStore.plot.calculateSpace({ + width: chartWidth, + height: chartHeight, + }); + availableWidth -= spaceUsed.width; + availableHeight -= spaceUsed.height; + + spaceUsed = this.componentStore.title.calculateSpace({ + width: this.chartConfig.width, + height: availableHeight, + }); + chartY = spaceUsed.height; + availableWidth -= spaceUsed.width; + availableHeight -= spaceUsed.height; + // + // spaceUsed = this.componentStore.xAxis.calculateSpace({ + // width: availableWidth, + // height: availableHeight, + // }); + // availableWidth -= spaceUsed.width; + // availableHeight -= spaceUsed.height; + this.componentStore.plot.setBoundingBoxXY({x: chartX, y: chartY}); + this.componentStore.xAxis.setRange([chartX, chartX + chartWidth]); + this.componentStore.yAxis.setRange([chartY, chartY + chartHeight]); + } + + getDrawableElement() { + this.calculateSpace(); + const drawableElem: DrawableElem[] = []; + this.componentStore.plot.setAxes(this.componentStore.xAxis, this.componentStore.yAxis); + for (const component of Object.values(this.componentStore)) { + drawableElem.push(...component.getDrawableElements()); + } + return drawableElem; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts new file mode 100644 index 0000000000..e83badc353 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts @@ -0,0 +1,15 @@ +import { Dimension } from './Interfaces.js'; + +export interface ITextDimensionCalculator { + getDimension(text: string): Dimension; +} + +export class TextDimensionCalculator implements ITextDimensionCalculator { + constructor(private fontSize: number, private fontFamily: string) {} + getDimension(text: string): Dimension { + return { + width: text.length * this.fontSize, + height: this.fontSize, + }; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts new file mode 100644 index 0000000000..de43859c7f --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -0,0 +1,89 @@ +import { ITextDimensionCalculator, TextDimensionCalculator } from '../TextDimensionCalculator.js'; +import { + XYChartConfig, + XYChartData, + Dimension, + BoundingRect, + DrawableElem, + Point, + OrientationEnum, +} from '../Interfaces.js'; +import { ChartComponent } from './Interfaces.js'; + +export class ChartTitle implements ChartComponent { + private boundingRect: BoundingRect; + private showChartTitle: boolean; + private orientation: OrientationEnum; + constructor( + private textDimensionCalculator: ITextDimensionCalculator, + private chartConfig: XYChartConfig, + private chartData: XYChartData + ) { + this.boundingRect = { + x: 0, + y: 0, + width: 0, + height: 0, + }; + this.showChartTitle = !!(this.chartData.title && this.chartConfig.showChartTitle); + this.orientation = OrientationEnum.VERTICAL; + } + setOrientation(orientation: OrientationEnum): void { + this.orientation = orientation; + } + setBoundingBoxXY(point: Point): void { + this.boundingRect.x = point.x; + this.boundingRect.y = point.y; + } + calculateSpace(availableSpace: Dimension): Dimension { + const titleDimension = this.textDimensionCalculator.getDimension(this.chartData.title); + const widthRequired = Math.max(titleDimension.width, availableSpace.width); + const heightRequired = titleDimension.height + 2 * this.chartConfig.titlePadding; + if ( + titleDimension.width <= widthRequired && + titleDimension.height <= heightRequired && + this.showChartTitle + ) { + this.boundingRect.width = widthRequired; + this.boundingRect.height = heightRequired; + } + + return { + width: this.boundingRect.width, + height: this.boundingRect.height, + }; + } + getDrawableElements(): DrawableElem[] { + const drawableElem: DrawableElem[] = []; + if (this.boundingRect.height > 0 && this.boundingRect.width > 0) { + drawableElem.push({ + groupText: 'chart-title', + type: 'text', + data: [ + { + fontSize: this.chartConfig.titleFontSize, + text: this.chartData.title, + verticalPos: 'center', + horizontalPos: 'middle', + x: this.boundingRect.x + this.boundingRect.width / 2, + y: this.boundingRect.y + this.boundingRect.height / 2, + fill: this.chartConfig.titleFill, + rotation: 0, + }, + ], + }); + } + return drawableElem; + } +} + +export function getChartTitleComponent( + chartConfig: XYChartConfig, + chartData: XYChartData +): ChartComponent { + const textDimensionCalculator = new TextDimensionCalculator( + chartConfig.titleFontSize, + chartConfig.fontFamily + ); + return new ChartTitle(textDimensionCalculator, chartConfig, chartData); +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts new file mode 100644 index 0000000000..d9644d6af6 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts @@ -0,0 +1,8 @@ +import { Dimension, DrawableElem, OrientationEnum, Point } from '../Interfaces.js'; + +export interface ChartComponent { + setOrientation(orientation: OrientationEnum): void; + calculateSpace(availableSpace: Dimension): Dimension; + setBoundingBoxXY(point: Point): void; + getDrawableElements(): DrawableElem[]; +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts new file mode 100644 index 0000000000..dd908e2830 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts @@ -0,0 +1,54 @@ +import { ScaleBand, scaleBand } from 'd3'; +import { + Dimension, + Point, + DrawableElem, + BoundingRect, + OrientationEnum, + XYChartConfig, +} from '../../Interfaces.js'; +import { IAxis } from './index.js'; + +export class BandAxis implements IAxis { + private scale: ScaleBand<string>; + private range: [number, number]; + private boundingRect: BoundingRect; + private orientation: OrientationEnum; + private categories: string[]; + + constructor(private chartConfig: XYChartConfig, categories: string[]) { + this.range = [0, 10]; + this.categories = categories; + this.scale = scaleBand().domain(this.categories).range(this.range); + this.boundingRect = { x: 0, y: 0, width: 0, height: 0 }; + this.orientation = OrientationEnum.VERTICAL; + } + + setRange(range: [number, number]): void { + this.range = range; + this.scale = scaleBand().domain(this.categories).range(this.range); + } + setOrientation(orientation: OrientationEnum): void { + this.orientation = orientation; + } + + getScaleValue(value: string): number { + return this.scale(value) || this.range[0]; + } + + calculateSpace(availableSpace: Dimension): Dimension { + return { + width: availableSpace.width, + height: availableSpace.height, + }; + } + + setBoundingBoxXY(point: Point): void { + this.boundingRect.x = point.x; + this.boundingRect.y = point.y; + } + + getDrawableElements(): DrawableElem[] { + return []; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts new file mode 100644 index 0000000000..02c0bd6446 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -0,0 +1,55 @@ +import { scaleLinear, ScaleLinear } from 'd3'; +import { + Dimension, + Point, + DrawableElem, + BoundingRect, + OrientationEnum, + XYChartConfig, +} from '../../Interfaces.js'; +import { IAxis } from './index.js'; + +export class LinearAxis implements IAxis { + private scale: ScaleLinear<number, number>; + private boundingRect: BoundingRect; + private orientation: OrientationEnum; + private domain: [number, number]; + private range: [number, number]; + + constructor(private chartConfig: XYChartConfig, domain: [number, number]) { + this.domain = domain; + this.range = [0, 10]; + this.scale = scaleLinear().domain(this.domain).range(this.range); + this.boundingRect = { x: 0, y: 0, width: 0, height: 0 }; + this.orientation = OrientationEnum.VERTICAL; + } + + setRange(range: [number, number]): void { + this.range = range; + this.scale = scaleLinear().domain(this.domain).range(this.range); + } + + setOrientation(orientation: OrientationEnum): void { + this.orientation = orientation; + } + + getScaleValue(value: number): number { + return this.scale(value); + } + + calculateSpace(availableSpace: Dimension): Dimension { + return { + width: availableSpace.width, + height: availableSpace.height, + }; + } + + setBoundingBoxXY(point: Point): void { + this.boundingRect.x = point.x; + this.boundingRect.y = point.y; + } + + getDrawableElements(): DrawableElem[] { + return []; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts new file mode 100644 index 0000000000..f7ff5cc69f --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -0,0 +1,31 @@ +import { + AxisDataType, + BandAxisDataType, + BoundingRect, + LinearAxisDataType, + XYChartConfig, + XYChartData, +} from '../../Interfaces.js'; +import { ChartComponent } from '../Interfaces.js'; +import { BandAxis } from './BandAxis.js'; +import { LinearAxis } from './LinearAxis.js'; + +export interface IAxis extends ChartComponent { + getScaleValue(value: string | number): number; + setRange(range: [number, number]): void; +} + +function isLinearAxisData(data: any): data is LinearAxisDataType { + return !(Number.isNaN(data.min) || Number.isNaN(data.max)); +} + +function isBandAxisData(data: any): data is BandAxisDataType { + return data.categories && Array.isArray(data.categories); +} + +export function getAxis(data: AxisDataType, chartConfig: XYChartConfig): IAxis { + if (isBandAxisData(data)) { + return new BandAxis(chartConfig, data.categories); + } + return new LinearAxis(chartConfig, [data.min, data.max]); +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts new file mode 100644 index 0000000000..b60fea9056 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -0,0 +1,34 @@ +import { line } from 'd3'; +import { DrawableElem, SimplePlotDataType } from '../../Interfaces.js'; +import { IAxis } from '../axis/index.js'; + +export class LinePlot { + constructor(private data: SimplePlotDataType, private xAxis: IAxis, private yAxis: IAxis) {} + + getDrawableElement(): DrawableElem[] { + const finalData: [number, number][] = this.data.map((d) => [ + this.xAxis.getScaleValue(d[0]), + this.yAxis.getScaleValue(d[1]), + ]); + + const path = line() + .x((d) => d[0]) + .y((d) => d[1])(finalData); + if (!path) { + return []; + } + return [ + { + groupText: 'line-plot', + type: 'path', + data: [ + { + path, + strokeFill: '#0000ff', + strokeWidth: 2, + }, + ], + }, + ]; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts new file mode 100644 index 0000000000..5af28127dc --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -0,0 +1,81 @@ +import { + XYChartConfig, + XYChartData, + Dimension, + BoundingRect, + DrawableElem, + Point, + OrientationEnum, + ChartPlotEnum, +} from '../../Interfaces.js'; +import { IAxis } from '../axis/index.js'; +import { ChartComponent } from './../Interfaces.js'; +import { LinePlot } from './LinePlot.js'; + + +export interface IPlot extends ChartComponent { + setAxes(xAxis: IAxis, yAxis: IAxis): void +} + +export class Plot implements IPlot { + private boundingRect: BoundingRect; + private orientation: OrientationEnum; + private xAxis?: IAxis; + private yAxis?: IAxis; + + constructor( + private chartConfig: XYChartConfig, + private chartData: XYChartData, + ) { + this.boundingRect = { + x: 0, + y: 0, + width: 0, + height: 0, + }; + this.orientation = OrientationEnum.VERTICAL; + } + setAxes(xAxis: IAxis, yAxis: IAxis) { + this.xAxis = xAxis; + this.yAxis = yAxis; + } + setOrientation(orientation: OrientationEnum): void { + this.orientation = orientation; + } + setBoundingBoxXY(point: Point): void { + this.boundingRect.x = point.x; + this.boundingRect.y = point.y; + } + calculateSpace(availableSpace: Dimension): Dimension { + this.boundingRect.width = availableSpace.width; + this.boundingRect.height = availableSpace.height; + + return { + width: this.boundingRect.width, + height: this.boundingRect.height, + }; + } + getDrawableElements(): DrawableElem[] { + if(!(this.xAxis && this.yAxis)) { + throw Error("Axes must be passed to render Plots"); + } + const drawableElem: DrawableElem[] = []; + for(const plot of this.chartData.plots) { + switch(plot.type) { + case ChartPlotEnum.LINE: { + const linePlot = new LinePlot(plot.data, this.xAxis, this.yAxis); + drawableElem.push(...linePlot.getDrawableElement()) + } + break; + } + } + return drawableElem; + } +} + +export function getPlotComponent( + chartConfig: XYChartConfig, + chartData: XYChartData, +): IPlot { + return new Plot(chartConfig, chartData); +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts new file mode 100644 index 0000000000..d307b29579 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -0,0 +1,77 @@ +// @ts-ignore: TODO Fix ts errors +import { defaultConfig } from '../../../config.js'; +import { log } from '../../../logger.js'; +import { + ChartPlotEnum, + DrawableElem, + XYChartConfig, + XYChartData, + OrientationEnum, + XYChartYAxisPosition, +} from './Interfaces.js'; +import { Orchestrator } from './Orchestrator.js'; + +export class XYChartBuilder { + private config: XYChartConfig; + private chartData: XYChartData; + + constructor() { + this.config = { + width: 500, + height: 500, + fontFamily: defaultConfig.fontFamily || 'Sans', + titleFontSize: 16, + titleFill: '#000000', + titlePadding: 5, + xAxisFontSize: 14, + xAxisTitleFontSize: 16, + yAxisFontSize: 14, + yAxisTitleFontSize: 16, + yAxisPosition: XYChartYAxisPosition.LEFT, + showChartTitle: true, + showXAxisLable: true, + showXAxisTitle: true, + showYAxisLabel: true, + showYAxisTitle: true, + chartOrientation: OrientationEnum.HORIZONTAL, + plotReservedSpacePercent: 50, + }; + this.chartData = { + yAxis: { + title: 'yAxis1', + min: 0, + max: 100, + }, + xAxis: { + title: 'xAxis', + categories: ['category1', 'category2', 'category3'], + }, + title: 'this is a sample task', + plots: [ + { + type: ChartPlotEnum.LINE, + data: [ + ['category1', 33], + ['category2', 45], + ['category3', 65], + ], + }, + ], + }; + } + + setWidth(width: number) { + this.config.width = width; + } + + setHeight(height: number) { + this.config.height = height; + } + + build(): DrawableElem[] { + log.trace(`Build start with Config: ${JSON.stringify(this.config, null, 2)}`); + log.trace(`Build start with ChartData: ${JSON.stringify(this.chartData, null, 2)}`); + const orchestrator = new Orchestrator(this.config, this.chartData); + return orchestrator.getDrawableElement(); + } +} diff --git a/packages/mermaid/src/diagrams/xychart/xychartBuilder.ts b/packages/mermaid/src/diagrams/xychart/xychartBuilder.ts deleted file mode 100644 index b4bbdc31eb..0000000000 --- a/packages/mermaid/src/diagrams/xychart/xychartBuilder.ts +++ /dev/null @@ -1,5 +0,0 @@ -// @ts-ignore: TODO Fix ts errors -import { scaleLinear } from 'd3'; -import { log } from '../../logger.js'; - -export class XYChartBuilder {} diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 968d1390da..dcf66b1b26 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -11,6 +11,8 @@ import { setAccDescription, clear as commonClear, } from '../../commonDb.js'; +import { XYChartBuilder } from './chartBuilder/index.js'; +import { DrawableElem } from './chartBuilder/Interfaces.js'; const config = configApi.getConfig(); @@ -18,16 +20,33 @@ function textSanitizer(text: string) { return sanitizeText(text.trim(), config); } -export const parseDirective = function (statement: string, context: string, type: string) { +function parseDirective(statement: string, context: string, type: string) { // @ts-ignore: TODO Fix ts errors mermaidAPI.parseDirective(this, statement, context, type); }; +const xyChartBuilder = new XYChartBuilder(); + +function getDrawableElem(): DrawableElem[] { + return xyChartBuilder.build(); +} + +function setHeight(height: number) { + xyChartBuilder.setHeight(height); +} + +function setWidth(width: number) { + xyChartBuilder.setWidth(width); +} + const clear = function () { commonClear(); }; export default { + setWidth, + setHeight, + getDrawableElem, parseDirective, clear, setAccTitle, diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index a4caacf524..ee696377ea 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -1,11 +1,27 @@ -// @ts-ignore: TODO Fix ts errors -import { select } from 'd3'; +import { select, scaleOrdinal, scaleLinear, axisBottom, line } from 'd3'; import * as configApi from '../../config.js'; import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import { Diagram } from '../../Diagram.js'; +import { + DrawableElem, + TextElem, + TextHorizontalPos, + TextVerticalPos, +} from './chartBuilder/Interfaces.js'; export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { + function getDominantBaseLine(horizontalPos: TextHorizontalPos) { + return horizontalPos === 'top' ? 'hanging' : 'middle'; + } + + function getTextAnchor(verticalPos: TextVerticalPos) { + return verticalPos === 'left' ? 'start' : 'middle'; + } + + function getTextTransformation(data: TextElem) { + return `translate(${data.x}, ${data.y}) rotate(${data.rotation || 0})`; + } const conf = configApi.getConfig(); log.debug('Rendering xychart chart\n' + txt); @@ -17,8 +33,8 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram sandboxElement = select('#i' + id); } const root = - securityLevel === 'sandbox' - ? select(sandboxElement.nodes()[0].contentDocument.body) + sandboxElement + ? sandboxElement : select('body'); const svg = root.select(`[id="${id}"]`); @@ -28,9 +44,80 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram const width = 500; const height = 500; + // @ts-ignore: TODO Fix ts errors configureSvgSize(svg, height, width, true); svg.attr('viewBox', '0 0 ' + width + ' ' + height); + + // @ts-ignore: TODO Fix ts errors + diagObj.db.setHeight(height); + // @ts-ignore: TODO Fix ts errors + diagObj.db.setWidth(width); + + // @ts-ignore: TODO Fix ts errors + const shapes: DrawableElem[] = diagObj.db.getDrawableElem(); + + for (const shape of shapes) { + if (shape.data.length === 0) { + log.trace( + `Skipped drawing of shape of type: ${shape.type} with data: ${JSON.stringify( + shape.data, + null, + 2 + )}` + ); + continue; + } + log.trace( + `Drawing shape of type: ${shape.type} with data: ${JSON.stringify(shape.data, null, 2)}` + ); + + const shapeGroup = group.append('g').attr('class', shape.groupText); + + + switch (shape.type) { + case 'rect': + shapeGroup + .selectAll('rect') + .data(shape.data) + .enter() + .append('rect') + .attr('x', data => data.x) + .attr('y', data => data.y) + .attr('width', data => data.width) + .attr('height', data => data.height) + .attr('fill', data => data.fill) + .attr('stroke', data => data.strokeFill) + .attr('stroke-width', data => data.strokeWidth); + break; + case 'text': + shapeGroup + .selectAll('text') + .data(shape.data) + .enter() + .append('text') + .attr('x', 0) + .attr('y', 0) + .attr('fill', data => data.fill) + .attr('font-size', data => data.fontSize) + .attr('dominant-baseline', data => getDominantBaseLine(data.horizontalPos)) + .attr('text-anchor', data => getTextAnchor(data.verticalPos)) + .attr('transform', data => getTextTransformation(data)) + .text(data => data.text); + break; + case 'path': + shapeGroup + .selectAll('path') + .data(shape.data) + .enter() + .append('path') + .attr('d', data => data.path) + .attr('fill', data => data.fill? data.fill: "none") + .attr('stroke', data => data.strokeFill) + .attr('stroke-width', data => data.strokeWidth) + break; + } + } }; export default { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f258400a6e..1cb943a0c8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -264,9 +264,15 @@ importers: '@types/d3-sankey': specifier: ^0.12.1 version: 0.12.1 + '@types/d3-scale': + specifier: ^4.0.2 + version: 4.0.2 '@types/d3-selection': - specifier: ^3.0.5 - version: 3.0.5 + specifier: ^3.0.3 + version: 3.0.3 + '@types/d3-shape': + specifier: ^3.1.0 + version: 3.1.0 '@types/dompurify': specifier: ^3.0.2 version: 3.0.2 @@ -472,6 +478,58 @@ importers: specifier: ^7.0.0 version: 7.0.0 + packages/mermaid/src/vitepress: + dependencies: + '@vueuse/core': + specifier: ^10.1.0 + version: 10.1.0(vue@3.2.47) + jiti: + specifier: ^1.18.2 + version: 1.18.2 + vue: + specifier: ^3.2.47 + version: 3.2.47 + devDependencies: + '@iconify-json/carbon': + specifier: ^1.1.16 + version: 1.1.16 + '@unocss/reset': + specifier: ^0.51.8 + version: 0.51.8 + '@vite-pwa/vitepress': + specifier: ^0.0.5 + version: 0.0.5(vite-plugin-pwa@0.14.7) + '@vitejs/plugin-vue': + specifier: ^4.2.1 + version: 4.2.1(vite@4.3.3)(vue@3.2.47) + fast-glob: + specifier: ^3.2.12 + version: 3.2.12 + https-localhost: + specifier: ^4.7.1 + version: 4.7.1 + pathe: + specifier: ^1.1.0 + version: 1.1.0 + unocss: + specifier: ^0.51.8 + version: 0.51.8(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.3) + unplugin-vue-components: + specifier: ^0.24.1 + version: 0.24.1(rollup@2.79.1)(vue@3.2.47) + vite: + specifier: ^4.3.3 + version: 4.3.3(@types/node@18.16.0) + vite-plugin-pwa: + specifier: ^0.14.7 + version: 0.14.7(vite@4.3.3)(workbox-build@6.5.4)(workbox-window@6.5.4) + vitepress: + specifier: 1.0.0-alpha.75 + version: 1.0.0-alpha.75(@algolia/client-search@4.14.2)(@types/node@18.16.0) + workbox-window: + specifier: ^6.5.4 + version: 6.5.4 + tests/webpack: dependencies: '@mermaid-js/mermaid-example-diagram': From 183bc0a9783e752779c9c8427d4b7f88b8324aac Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 10 Jun 2023 17:02:55 +0530 Subject: [PATCH 003/126] Rendered axis with basic line chart --- .../xychart/chartBuilder/Interfaces.ts | 24 +- .../xychart/chartBuilder/Orchestrator.ts | 63 +++-- .../chartBuilder/TextDimensionCalculator.ts | 10 +- .../chartBuilder/components/ChartTitle.ts | 9 +- .../chartBuilder/components/Interfaces.ts | 1 - .../chartBuilder/components/axis/BandAxis.ts | 63 +++-- .../chartBuilder/components/axis/BaseAxis.ts | 217 ++++++++++++++++++ .../components/axis/LinearAxis.ts | 62 ++--- .../chartBuilder/components/axis/index.ts | 21 +- .../diagrams/xychart/chartBuilder/index.ts | 44 ++-- .../src/diagrams/xychart/xychartRenderer.ts | 56 +++-- 11 files changed, 396 insertions(+), 174 deletions(-) create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 767a982627..569a5d11c3 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -31,6 +31,17 @@ export type VisibilityOption = { yAxisLabel: boolean; }; +export interface AxisConfig { + showLabel: boolean; + labelFontSize: number; + lablePadding: number; + labelColor: string; + showTitle: boolean; + titleFontSize: number; + titlePadding: number; + titleColor: string; +} + export interface XYChartConfig { width: number; height: number; @@ -38,16 +49,9 @@ export interface XYChartConfig { titleFontSize: number; titleFill: string; titlePadding: number; - xAxisFontSize: number; - xAxisTitleFontSize: number; - yAxisFontSize: number; - yAxisTitleFontSize: number; - yAxisPosition: XYChartYAxisPosition; - showChartTitle: boolean; - showXAxisLable: boolean; - showXAxisTitle: boolean; - showYAxisLabel: boolean; - showYAxisTitle: boolean; + showtitle: boolean; + xAxis: AxisConfig; + yAxis: AxisConfig; chartOrientation: OrientationEnum; plotReservedSpacePercent: number; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index d597569215..fdd60d6342 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,22 +1,23 @@ +import { log } from '../../../logger.js'; import { DrawableElem, XYChartConfig, XYChartData } from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; import { ChartComponent } from './components/Interfaces.js'; import { IAxis, getAxis } from './components/axis/index.js'; -import { IPlot, getPlotComponent, isTypeIPlot } from './components/plot/index.js'; +import { IPlot, getPlotComponent } from './components/plot/index.js'; export class Orchestrator { private componentStore: { - title: ChartComponent, - plot: IPlot, - xAxis: IAxis, - yAxis: IAxis, + title: ChartComponent; + plot: IPlot; + xAxis: IAxis; + yAxis: IAxis; }; constructor(private chartConfig: XYChartConfig, chartData: XYChartData) { this.componentStore = { title: getChartTitleComponent(chartConfig, chartData), plot: getPlotComponent(chartConfig, chartData), - xAxis: getAxis(chartData.xAxis, chartConfig), - yAxis: getAxis(chartData.yAxis, chartConfig), + xAxis: getAxis(chartData.xAxis, chartConfig.xAxis), + yAxis: getAxis(chartData.yAxis, chartConfig.yAxis), }; } @@ -25,9 +26,10 @@ export class Orchestrator { let availableHeight = this.chartConfig.height; let chartX = 0; let chartY = 0; - const chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100); - const chartHeight = Math.floor((availableHeight * this.chartConfig.plotReservedSpacePercent) / 100); - + let chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100); + let chartHeight = Math.floor( + (availableHeight * this.chartConfig.plotReservedSpacePercent) / 100 + ); let spaceUsed = this.componentStore.plot.calculateSpace({ width: chartWidth, height: chartHeight, @@ -39,19 +41,42 @@ export class Orchestrator { width: this.chartConfig.width, height: availableHeight, }); + log.trace('space used by title: ', spaceUsed); chartY = spaceUsed.height; - availableWidth -= spaceUsed.width; availableHeight -= spaceUsed.height; - // - // spaceUsed = this.componentStore.xAxis.calculateSpace({ - // width: availableWidth, - // height: availableHeight, - // }); - // availableWidth -= spaceUsed.width; - // availableHeight -= spaceUsed.height; - this.componentStore.plot.setBoundingBoxXY({x: chartX, y: chartY}); + this.componentStore.xAxis.setAxisPosition('bottom'); + spaceUsed = this.componentStore.xAxis.calculateSpace({ + width: availableWidth, + height: availableHeight, + }); + log.trace('space used by xaxis: ', spaceUsed); + availableHeight -= spaceUsed.height; + this.componentStore.yAxis.setAxisPosition('left'); + spaceUsed = this.componentStore.yAxis.calculateSpace({ + width: availableWidth, + height: availableHeight, + }); + log.trace('space used by yaxis: ', spaceUsed); + chartX = spaceUsed.width; + availableWidth -= spaceUsed.width; + if (availableWidth > 0) { + chartWidth += availableWidth; + availableWidth = 0; + } + if (availableHeight > 0) { + chartHeight += availableHeight; + availableHeight = 0; + } + + log.trace( + `Final chart dimansion: x = ${chartX}, y = ${chartY}, width = ${chartWidth}, height = ${chartHeight}` + ); + + this.componentStore.plot.setBoundingBoxXY({ x: chartX, y: chartY }); this.componentStore.xAxis.setRange([chartX, chartX + chartWidth]); + this.componentStore.xAxis.setBoundingBoxXY({ x: chartX, y: chartY + chartHeight }); this.componentStore.yAxis.setRange([chartY, chartY + chartHeight]); + this.componentStore.yAxis.setBoundingBoxXY({ x: 0, y: chartY }); } getDrawableElement() { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts index e83badc353..c7a252609d 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts @@ -1,15 +1,15 @@ import { Dimension } from './Interfaces.js'; export interface ITextDimensionCalculator { - getDimension(text: string): Dimension; + getDimension(texts: string[], fontSize: number, fontFamily?: string ): Dimension; } export class TextDimensionCalculator implements ITextDimensionCalculator { - constructor(private fontSize: number, private fontFamily: string) {} - getDimension(text: string): Dimension { + constructor() {} + getDimension(texts: string[], fontSize: number): Dimension { return { - width: text.length * this.fontSize, - height: this.fontSize, + width: texts.reduce((acc, cur) => Math.max(cur.length, acc), 0) * fontSize, + height: fontSize, }; } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index de43859c7f..51e27b0cd3 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -25,7 +25,7 @@ export class ChartTitle implements ChartComponent { width: 0, height: 0, }; - this.showChartTitle = !!(this.chartData.title && this.chartConfig.showChartTitle); + this.showChartTitle = !!(this.chartData.title && this.chartConfig.showtitle); this.orientation = OrientationEnum.VERTICAL; } setOrientation(orientation: OrientationEnum): void { @@ -36,7 +36,7 @@ export class ChartTitle implements ChartComponent { this.boundingRect.y = point.y; } calculateSpace(availableSpace: Dimension): Dimension { - const titleDimension = this.textDimensionCalculator.getDimension(this.chartData.title); + 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 ( @@ -81,9 +81,6 @@ export function getChartTitleComponent( chartConfig: XYChartConfig, chartData: XYChartData ): ChartComponent { - const textDimensionCalculator = new TextDimensionCalculator( - chartConfig.titleFontSize, - chartConfig.fontFamily - ); + const textDimensionCalculator = new TextDimensionCalculator(); return new ChartTitle(textDimensionCalculator, chartConfig, chartData); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts index d9644d6af6..92f27986be 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts @@ -1,7 +1,6 @@ import { Dimension, DrawableElem, OrientationEnum, Point } from '../Interfaces.js'; export interface ChartComponent { - setOrientation(orientation: OrientationEnum): void; calculateSpace(availableSpace: Dimension): Dimension; setBoundingBoxXY(point: Point): void; getDrawableElements(): DrawableElem[]; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts index dd908e2830..75a9ab643d 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts @@ -1,54 +1,43 @@ import { ScaleBand, scaleBand } from 'd3'; -import { - Dimension, - Point, - DrawableElem, - BoundingRect, - OrientationEnum, - XYChartConfig, -} from '../../Interfaces.js'; -import { IAxis } from './index.js'; +import { AxisConfig } from '../../Interfaces.js'; +import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import { BaseAxis } from './BaseAxis.js'; +import { log } from '../../../../../logger.js'; -export class BandAxis implements IAxis { +export class BandAxis extends BaseAxis { private scale: ScaleBand<string>; - private range: [number, number]; - private boundingRect: BoundingRect; - private orientation: OrientationEnum; private categories: string[]; - constructor(private chartConfig: XYChartConfig, categories: string[]) { - this.range = [0, 10]; + constructor( + axisConfig: AxisConfig, + categories: string[], + title: string, + textDimensionCalculator: ITextDimensionCalculator + ) { + super(axisConfig, title, textDimensionCalculator); this.categories = categories; - this.scale = scaleBand().domain(this.categories).range(this.range); - this.boundingRect = { x: 0, y: 0, width: 0, height: 0 }; - this.orientation = OrientationEnum.VERTICAL; + this.scale = scaleBand().domain(this.categories).range(this.getRange()); } setRange(range: [number, number]): void { - this.range = range; - this.scale = scaleBand().domain(this.categories).range(this.range); - } - setOrientation(orientation: OrientationEnum): void { - this.orientation = orientation; + super.setRange(range); } - getScaleValue(value: string): number { - return this.scale(value) || this.range[0]; + recalculateScale(): void { + this.scale = scaleBand() + .domain(this.categories) + .range(this.getRange()) + .paddingInner(1) + .paddingOuter(0) + .align(0.5); + log.trace('BandAxis axis final categories, range: ', this.categories, this.getRange()); } - calculateSpace(availableSpace: Dimension): Dimension { - return { - width: availableSpace.width, - height: availableSpace.height, - }; + getTickValues(): (string | number)[] { + return this.categories; } - setBoundingBoxXY(point: Point): void { - this.boundingRect.x = point.x; - this.boundingRect.y = point.y; - } - - getDrawableElements(): DrawableElem[] { - return []; + getScaleValue(value: string): number { + return this.scale(value) || this.getRange()[0]; } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts new file mode 100644 index 0000000000..14107da521 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -0,0 +1,217 @@ +import { + Dimension, + Point, + DrawableElem, + BoundingRect, + AxisConfig, +} from '../../Interfaces.js'; +import { AxisPosition, IAxis } from './index.js'; +import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import { log } from '../../../../../logger.js'; + +export abstract class BaseAxis implements IAxis { + protected boundingRect: BoundingRect = {x: 0, y: 0, width: 0, height: 0}; + protected axisPosition: AxisPosition = 'left'; + private range: [number, number]; + protected showTitle = false; + protected showLabel = false; + protected innerPadding = 0; + + constructor( + protected axisConfig: AxisConfig, + protected title: string, + protected textDimensionCalculator: ITextDimensionCalculator + ) { + this.range = [0, 10]; + this.boundingRect = { x: 0, y: 0, width: 0, height: 0 }; + this.axisPosition = 'left'; + + } + + setRange(range: [number, number]): void { + this.range = range; + this.recalculateScale(); + } + + getRange(): [number, number] { + return [this.range[0] + this.innerPadding, this.range[1] - this.innerPadding]; + } + + setAxisPosition(axisPosition: AxisPosition): void { + this.axisPosition = axisPosition; + } + + abstract getScaleValue(value: number | string): number; + + abstract recalculateScale(): void; + + abstract getTickValues(): Array<string | number>; + + private getLabelDimension(): Dimension { + return this.textDimensionCalculator.getDimension( + this.getTickValues().map((tick) => tick.toString()), + this.axisConfig.labelFontSize + ); + } + + private calculateSpaceIfDrawnVertical(availableSpace: Dimension) { + let availableHeight = availableSpace.height; + if (this.axisConfig.showLabel) { + const spaceRequired = this.getLabelDimension(); + this.innerPadding = spaceRequired.width / 2; + const heightRequired = spaceRequired.height + this.axisConfig.lablePadding * 2; + log.trace('height required for axis label: ', heightRequired); + if (heightRequired <= availableHeight) { + availableHeight -= heightRequired; + this.showLabel = true; + } + } + if (this.axisConfig.showTitle) { + const spaceRequired = this.textDimensionCalculator.getDimension( + [this.title], + this.axisConfig.labelFontSize + ); + const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2; + log.trace('height required for axis title: ', heightRequired); + if (heightRequired <= availableHeight) { + availableHeight -= heightRequired; + this.showTitle = true; + } + } + this.boundingRect.width = availableSpace.width; + this.boundingRect.height = availableSpace.height - availableHeight; + } + + private calculateSpaceIfDrawnHorizontally(availableSpace: Dimension) { + let availableWidth = availableSpace.width; + if (this.axisConfig.showLabel) { + const spaceRequired = this.getLabelDimension(); + this.innerPadding = spaceRequired.width / 2; + const widthRequired = spaceRequired.width + this.axisConfig.lablePadding * 2; + log.trace('width required for axis label: ', widthRequired); + if (widthRequired <= availableWidth) { + availableWidth -= widthRequired; + this.showLabel = true; + } + } + if (this.axisConfig.showTitle) { + const spaceRequired = this.textDimensionCalculator.getDimension( + [this.title], + this.axisConfig.labelFontSize + ); + const widthRequired = spaceRequired.height + this.axisConfig.lablePadding * 2; + log.trace('width required for axis title: ', widthRequired); + if (widthRequired <= availableWidth) { + availableWidth -= widthRequired; + this.showTitle = true; + } + } + this.boundingRect.width = availableSpace.width - availableWidth; + this.boundingRect.height = availableSpace.height; + } + + calculateSpace(availableSpace: Dimension): Dimension { + if (!(this.axisConfig.showLabel || this.axisConfig.showTitle)) { + this.recalculateScale(); + return { width: 0, height: 0 }; + } + if (this.axisPosition === 'left') { + this.calculateSpaceIfDrawnHorizontally(availableSpace); + } else { + this.calculateSpaceIfDrawnVertical(availableSpace); + } + this.recalculateScale(); + return { + width: this.boundingRect.width, + height: this.boundingRect.height, + }; + } + + setBoundingBoxXY(point: Point): void { + this.boundingRect.x = point.x; + this.boundingRect.y = point.y; + } + + private getDrawaableElementsForLeftAxis(): DrawableElem[] { + const drawableElement: DrawableElem[] = []; + if (this.showLabel) { + drawableElement.push({ + type: 'text', + groupText: 'left-axis-label', + data: this.getTickValues().map((tick) => ({ + text: tick.toString(), + x: this.boundingRect.x + this.boundingRect.width - this.axisConfig.lablePadding, + y: this.getScaleValue(tick), + fill: this.axisConfig.labelColor, + fontSize: this.axisConfig.labelFontSize, + rotation: 0, + verticalPos: 'right', + horizontalPos: 'middle', + })), + }); + } + if (this.showTitle) { + drawableElement.push({ + type: 'text', + groupText: 'right-axis-label', + data: [{ + text: this.title, + x: this.boundingRect.x + this.axisConfig.titlePadding, + y: this.range[0] + (this.range[1] - this.range[0])/2, + fill: this.axisConfig.titleColor, + fontSize: this.axisConfig.titleFontSize, + rotation: 270, + verticalPos: 'center', + horizontalPos: 'top', + }] + }) + } + return drawableElement; + } + private getDrawaableElementsForBottomAxis(): DrawableElem[] { + const drawableElement: DrawableElem[] = []; + if (this.showLabel) { + drawableElement.push({ + type: 'text', + groupText: 'right-axis-lable', + data: this.getTickValues().map((tick) => ({ + text: tick.toString(), + x: this.getScaleValue(tick), + y: this.boundingRect.y + this.axisConfig.lablePadding, + fill: this.axisConfig.labelColor, + fontSize: this.axisConfig.labelFontSize, + rotation: 0, + verticalPos: 'center', + horizontalPos: 'top', + })), + }); + } + if (this.showTitle) { + drawableElement.push({ + type: 'text', + groupText: 'right-axis-label', + data: [{ + text: this.title, + x: this.range[0] + (this.range[1] - this.range[0])/2, + y: this.boundingRect.y + this.boundingRect.height - this.axisConfig.titlePadding, + fill: this.axisConfig.titleColor, + fontSize: this.axisConfig.titleFontSize, + rotation: 0, + verticalPos: 'center', + horizontalPos: 'bottom', + }] + }) + } + return drawableElement; + } + + getDrawableElements(): DrawableElem[] { + if (this.axisPosition === 'left') { + return this.getDrawaableElementsForLeftAxis(); + } + if (this.axisPosition === 'bottom') { + return this.getDrawaableElementsForBottomAxis(); + } + return []; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index 02c0bd6446..9bf7c33b06 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -1,55 +1,37 @@ -import { scaleLinear, ScaleLinear } from 'd3'; -import { - Dimension, - Point, - DrawableElem, - BoundingRect, - OrientationEnum, - XYChartConfig, -} from '../../Interfaces.js'; -import { IAxis } from './index.js'; +import { ScaleLinear, scaleLinear } from 'd3'; +import { AxisConfig, Dimension } from '../../Interfaces.js'; +import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import { BaseAxis } from './BaseAxis.js'; +import { log } from '../../../../../logger.js'; -export class LinearAxis implements IAxis { +export class LinearAxis extends BaseAxis { private scale: ScaleLinear<number, number>; - private boundingRect: BoundingRect; - private orientation: OrientationEnum; private domain: [number, number]; - private range: [number, number]; - constructor(private chartConfig: XYChartConfig, domain: [number, number]) { + constructor( + axisConfig: AxisConfig, + domain: [number, number], + title: string, + textDimensionCalculator: ITextDimensionCalculator + ) { + super(axisConfig, title, textDimensionCalculator); this.domain = domain; - this.range = [0, 10]; - this.scale = scaleLinear().domain(this.domain).range(this.range); - this.boundingRect = { x: 0, y: 0, width: 0, height: 0 }; - this.orientation = OrientationEnum.VERTICAL; + this.scale = scaleLinear().domain(this.domain).range(this.getRange()); } - setRange(range: [number, number]): void { - this.range = range; - this.scale = scaleLinear().domain(this.domain).range(this.range); + getTickValues(): (string | number)[] { + return this.scale.ticks(); } - setOrientation(orientation: OrientationEnum): void { - this.orientation = orientation; + recalculateScale(): void { + if (this.axisPosition === 'left') { + this.domain.reverse(); // since yaxis in svg start from top + } + this.scale = scaleLinear().domain(this.domain).range(this.getRange()); + log.trace('Linear axis final domain, range: ', this.domain, this.getRange()); } getScaleValue(value: number): number { return this.scale(value); } - - calculateSpace(availableSpace: Dimension): Dimension { - return { - width: availableSpace.width, - height: availableSpace.height, - }; - } - - setBoundingBoxXY(point: Point): void { - this.boundingRect.x = point.x; - this.boundingRect.y = point.y; - } - - getDrawableElements(): DrawableElem[] { - return []; - } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index f7ff5cc69f..1972ef2c59 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,17 +1,19 @@ import { - AxisDataType, - BandAxisDataType, - BoundingRect, - LinearAxisDataType, - XYChartConfig, - XYChartData, + AxisConfig, + AxisDataType, + BandAxisDataType, + LinearAxisDataType } from '../../Interfaces.js'; +import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { ChartComponent } from '../Interfaces.js'; import { BandAxis } from './BandAxis.js'; import { LinearAxis } from './LinearAxis.js'; +export type AxisPosition = 'left' | 'bottom'; + export interface IAxis extends ChartComponent { getScaleValue(value: string | number): number; + setAxisPosition(axisPosition: AxisPosition): void; setRange(range: [number, number]): void; } @@ -23,9 +25,10 @@ function isBandAxisData(data: any): data is BandAxisDataType { return data.categories && Array.isArray(data.categories); } -export function getAxis(data: AxisDataType, chartConfig: XYChartConfig): IAxis { +export function getAxis(data: AxisDataType, axisConfig: AxisConfig): IAxis { + const textDimansionCalculator = new TextDimensionCalculator(); if (isBandAxisData(data)) { - return new BandAxis(chartConfig, data.categories); + return new BandAxis(axisConfig, data.categories, data.title, textDimansionCalculator); } - return new LinearAxis(chartConfig, [data.min, data.max]); + return new LinearAxis(axisConfig, [data.min, data.max], data.title, textDimansionCalculator); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index d307b29579..a47074e738 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -2,12 +2,11 @@ import { defaultConfig } from '../../../config.js'; import { log } from '../../../logger.js'; import { - ChartPlotEnum, - DrawableElem, - XYChartConfig, - XYChartData, - OrientationEnum, - XYChartYAxisPosition, + ChartPlotEnum, + DrawableElem, + OrientationEnum, + XYChartConfig, + XYChartData } from './Interfaces.js'; import { Orchestrator } from './Orchestrator.js'; @@ -17,22 +16,33 @@ export class XYChartBuilder { constructor() { this.config = { - width: 500, + width: 700, height: 500, fontFamily: defaultConfig.fontFamily || 'Sans', titleFontSize: 16, titleFill: '#000000', titlePadding: 5, - xAxisFontSize: 14, - xAxisTitleFontSize: 16, - yAxisFontSize: 14, - yAxisTitleFontSize: 16, - yAxisPosition: XYChartYAxisPosition.LEFT, - showChartTitle: true, - showXAxisLable: true, - showXAxisTitle: true, - showYAxisLabel: true, - showYAxisTitle: true, + showtitle: true, + yAxis: { + showLabel: true, + labelFontSize: 14, + lablePadding: 5, + labelColor: '#000000', + showTitle: true, + titleFontSize: 16, + titlePadding: 5, + titleColor: '#000000', + }, + xAxis: { + showLabel: true, + labelFontSize: 14, + lablePadding: 5, + labelColor: '#000000', + showTitle: true, + titleFontSize: 16, + titlePadding: 5, + titleColor: '#000000', + }, chartOrientation: OrientationEnum.HORIZONTAL, plotReservedSpacePercent: 50, }; diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index ee696377ea..a871177ce3 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -1,13 +1,13 @@ -import { select, scaleOrdinal, scaleLinear, axisBottom, line } from 'd3'; +import { select } from 'd3'; +import { Diagram } from '../../Diagram.js'; import * as configApi from '../../config.js'; import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; -import { Diagram } from '../../Diagram.js'; import { - DrawableElem, - TextElem, - TextHorizontalPos, - TextVerticalPos, + DrawableElem, + TextElem, + TextHorizontalPos, + TextVerticalPos, } from './chartBuilder/Interfaces.js'; export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { @@ -16,7 +16,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram } function getTextAnchor(verticalPos: TextVerticalPos) { - return verticalPos === 'left' ? 'start' : 'middle'; + return verticalPos === 'left' ? 'start' : verticalPos === 'right' ? 'end' : 'middle'; } function getTextTransformation(data: TextElem) { @@ -32,16 +32,13 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); } - const root = - sandboxElement - ? sandboxElement - : select('body'); + const root = sandboxElement ? sandboxElement : select('body'); const svg = root.select(`[id="${id}"]`); const group = svg.append('g').attr('class', 'main'); - const width = 500; + const width = 700; const height = 500; // @ts-ignore: TODO Fix ts errors @@ -74,7 +71,6 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram const shapeGroup = group.append('g').attr('class', shape.groupText); - switch (shape.type) { case 'rect': shapeGroup @@ -82,13 +78,13 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram .data(shape.data) .enter() .append('rect') - .attr('x', data => data.x) - .attr('y', data => data.y) - .attr('width', data => data.width) - .attr('height', data => data.height) - .attr('fill', data => data.fill) - .attr('stroke', data => data.strokeFill) - .attr('stroke-width', data => data.strokeWidth); + .attr('x', (data) => data.x) + .attr('y', (data) => data.y) + .attr('width', (data) => data.width) + .attr('height', (data) => data.height) + .attr('fill', (data) => data.fill) + .attr('stroke', (data) => data.strokeFill) + .attr('stroke-width', (data) => data.strokeWidth); break; case 'text': shapeGroup @@ -98,12 +94,12 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram .append('text') .attr('x', 0) .attr('y', 0) - .attr('fill', data => data.fill) - .attr('font-size', data => data.fontSize) - .attr('dominant-baseline', data => getDominantBaseLine(data.horizontalPos)) - .attr('text-anchor', data => getTextAnchor(data.verticalPos)) - .attr('transform', data => getTextTransformation(data)) - .text(data => data.text); + .attr('fill', (data) => data.fill) + .attr('font-size', (data) => data.fontSize) + .attr('dominant-baseline', (data) => getDominantBaseLine(data.horizontalPos)) + .attr('text-anchor', (data) => getTextAnchor(data.verticalPos)) + .attr('transform', (data) => getTextTransformation(data)) + .text((data) => data.text); break; case 'path': shapeGroup @@ -111,10 +107,10 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram .data(shape.data) .enter() .append('path') - .attr('d', data => data.path) - .attr('fill', data => data.fill? data.fill: "none") - .attr('stroke', data => data.strokeFill) - .attr('stroke-width', data => data.strokeWidth) + .attr('d', (data) => data.path) + .attr('fill', (data) => (data.fill ? data.fill : 'none')) + .attr('stroke', (data) => data.strokeFill) + .attr('stroke-width', (data) => data.strokeWidth); break; } } From cc1d6af23208219647c1c9769ee71ed73751026c Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 10 Jun 2023 22:37:23 +0530 Subject: [PATCH 004/126] Added axis tick and plot border --- .../xychart/chartBuilder/Interfaces.ts | 15 ++- .../xychart/chartBuilder/Orchestrator.ts | 9 ++ .../chartBuilder/components/ChartTitle.ts | 2 +- .../chartBuilder/components/axis/BaseAxis.ts | 120 +++++++++++------- .../components/axis/LinearAxis.ts | 9 +- .../chartBuilder/components/plot/LinePlot.ts | 2 +- .../components/plot/PlotBorder.ts | 21 +++ .../chartBuilder/components/plot/index.ts | 5 +- .../diagrams/xychart/chartBuilder/index.ts | 17 ++- .../src/diagrams/xychart/xychartRenderer.ts | 31 ++++- 10 files changed, 166 insertions(+), 65 deletions(-) create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 569a5d11c3..51350ca258 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -35,11 +35,15 @@ export interface AxisConfig { showLabel: boolean; labelFontSize: number; lablePadding: number; - labelColor: string; + labelFill: string; showTitle: boolean; titleFontSize: number; titlePadding: number; - titleColor: string; + titleFill: string; + showTick: boolean; + tickLength: number; + tickWidth: number; + tickFill: string; } export interface XYChartConfig { @@ -52,6 +56,7 @@ export interface XYChartConfig { showtitle: boolean; xAxis: AxisConfig; yAxis: AxisConfig; + plotBorderWidth: number; chartOrientation: OrientationEnum; plotReservedSpacePercent: number; } @@ -139,17 +144,17 @@ export interface PathElem { export type DrawableElem = | { - groupText: string; + groupTexts: string[]; type: 'rect'; data: RectElem[]; } | { - groupText: string; + groupTexts: string[]; type: 'text'; data: TextElem[]; } | { - groupText: string; + groupTexts: string[]; type: 'path'; data: PathElem[]; }; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index fdd60d6342..dce2cefe9d 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -67,6 +67,15 @@ export class Orchestrator { chartHeight += availableHeight; availableHeight = 0; } + const plotBorderWidthHalf = this.chartConfig.plotBorderWidth/2; + chartX += plotBorderWidthHalf; + chartY += plotBorderWidthHalf; + chartWidth -= this.chartConfig.plotBorderWidth; + chartHeight -= this.chartConfig.plotBorderWidth; + this.componentStore.plot.calculateSpace({ + width: chartWidth, + height: chartHeight, + }); log.trace( `Final chart dimansion: x = ${chartX}, y = ${chartY}, width = ${chartWidth}, height = ${chartHeight}` diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 51e27b0cd3..f02d7b05f1 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -57,7 +57,7 @@ export class ChartTitle implements ChartComponent { const drawableElem: DrawableElem[] = []; if (this.boundingRect.height > 0 && this.boundingRect.width > 0) { drawableElem.push({ - groupText: 'chart-title', + groupTexts: ['chart-title'], type: 'text', data: [ { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index 14107da521..f6ed16cafa 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -1,20 +1,15 @@ -import { - Dimension, - Point, - DrawableElem, - BoundingRect, - AxisConfig, -} from '../../Interfaces.js'; +import { Dimension, Point, DrawableElem, BoundingRect, AxisConfig } from '../../Interfaces.js'; import { AxisPosition, IAxis } from './index.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { log } from '../../../../../logger.js'; export abstract class BaseAxis implements IAxis { - protected boundingRect: BoundingRect = {x: 0, y: 0, width: 0, height: 0}; + protected boundingRect: BoundingRect = { x: 0, y: 0, width: 0, height: 0 }; protected axisPosition: AxisPosition = 'left'; private range: [number, number]; protected showTitle = false; protected showLabel = false; + protected showTick = false; protected innerPadding = 0; constructor( @@ -25,7 +20,6 @@ export abstract class BaseAxis implements IAxis { this.range = [0, 10]; this.boundingRect = { x: 0, y: 0, width: 0, height: 0 }; this.axisPosition = 'left'; - } setRange(range: [number, number]): void { @@ -54,7 +48,7 @@ export abstract class BaseAxis implements IAxis { ); } - private calculateSpaceIfDrawnVertical(availableSpace: Dimension) { + private calculateSpaceIfDrawnHorizontally(availableSpace: Dimension) { let availableHeight = availableSpace.height; if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); @@ -66,6 +60,10 @@ export abstract class BaseAxis implements IAxis { this.showLabel = true; } } + if (this.axisConfig.showTick && availableHeight >= this.axisConfig.tickLength) { + this.showTick = true; + availableHeight -= this.axisConfig.tickLength; + } if (this.axisConfig.showTitle) { const spaceRequired = this.textDimensionCalculator.getDimension( [this.title], @@ -82,7 +80,7 @@ export abstract class BaseAxis implements IAxis { this.boundingRect.height = availableSpace.height - availableHeight; } - private calculateSpaceIfDrawnHorizontally(availableSpace: Dimension) { + private calculateSpaceIfDrawnVertical(availableSpace: Dimension) { let availableWidth = availableSpace.width; if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); @@ -94,6 +92,10 @@ export abstract class BaseAxis implements IAxis { this.showLabel = true; } } + if (this.axisConfig.showTick && availableWidth >= this.axisConfig.tickLength) { + this.showTick = true; + availableWidth -= this.axisConfig.tickLength; + } if (this.axisConfig.showTitle) { const spaceRequired = this.textDimensionCalculator.getDimension( [this.title], @@ -116,9 +118,9 @@ export abstract class BaseAxis implements IAxis { return { width: 0, height: 0 }; } if (this.axisPosition === 'left') { - this.calculateSpaceIfDrawnHorizontally(availableSpace); - } else { this.calculateSpaceIfDrawnVertical(availableSpace); + } else { + this.calculateSpaceIfDrawnHorizontally(availableSpace); } this.recalculateScale(); return { @@ -137,12 +139,16 @@ export abstract class BaseAxis implements IAxis { if (this.showLabel) { drawableElement.push({ type: 'text', - groupText: 'left-axis-label', + groupTexts: ['left-axis', 'label'], data: this.getTickValues().map((tick) => ({ text: tick.toString(), - x: this.boundingRect.x + this.boundingRect.width - this.axisConfig.lablePadding, + x: + this.boundingRect.x + + this.boundingRect.width - + this.axisConfig.lablePadding - + this.axisConfig.tickLength, y: this.getScaleValue(tick), - fill: this.axisConfig.labelColor, + fill: this.axisConfig.labelFill, fontSize: this.axisConfig.labelFontSize, rotation: 0, verticalPos: 'right', @@ -150,21 +156,35 @@ export abstract class BaseAxis implements IAxis { })), }); } + if (this.showTick) { + const x = this.boundingRect.x + this.boundingRect.width; + drawableElement.push({ + type: 'path', + groupTexts: ['left-axis', 'ticks'], + data: this.getTickValues().map((tick) => ({ + path: `M ${x},${this.getScaleValue(tick)} L ${x - this.axisConfig.tickLength},${this.getScaleValue(tick)}`, + strokeFill: this.axisConfig.tickFill, + strokeWidth: this.axisConfig.tickWidth, + })), + }); + } if (this.showTitle) { drawableElement.push({ type: 'text', - groupText: 'right-axis-label', - data: [{ - text: this.title, - x: this.boundingRect.x + this.axisConfig.titlePadding, - y: this.range[0] + (this.range[1] - this.range[0])/2, - fill: this.axisConfig.titleColor, - fontSize: this.axisConfig.titleFontSize, - rotation: 270, - verticalPos: 'center', - horizontalPos: 'top', - }] - }) + groupTexts: ['left-axis', 'title'], + data: [ + { + text: this.title, + x: this.boundingRect.x + this.axisConfig.titlePadding, + y: this.range[0] + (this.range[1] - this.range[0]) / 2, + fill: this.axisConfig.titleFill, + fontSize: this.axisConfig.titleFontSize, + rotation: 270, + verticalPos: 'center', + horizontalPos: 'top', + }, + ], + }); } return drawableElement; } @@ -173,12 +193,12 @@ export abstract class BaseAxis implements IAxis { if (this.showLabel) { drawableElement.push({ type: 'text', - groupText: 'right-axis-lable', + groupTexts: ['bottom-axis', 'label'], data: this.getTickValues().map((tick) => ({ text: tick.toString(), x: this.getScaleValue(tick), - y: this.boundingRect.y + this.axisConfig.lablePadding, - fill: this.axisConfig.labelColor, + y: this.boundingRect.y + this.axisConfig.lablePadding + this.axisConfig.tickLength, + fill: this.axisConfig.labelFill, fontSize: this.axisConfig.labelFontSize, rotation: 0, verticalPos: 'center', @@ -186,21 +206,35 @@ export abstract class BaseAxis implements IAxis { })), }); } + if (this.showTick) { + const y = this.boundingRect.y; + drawableElement.push({ + type: 'path', + groupTexts: ['bottom-axis', 'ticks'], + data: this.getTickValues().map((tick) => ({ + path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${y + this.axisConfig.tickLength}`, + strokeFill: this.axisConfig.tickFill, + strokeWidth: this.axisConfig.tickWidth, + })), + }); + } if (this.showTitle) { drawableElement.push({ type: 'text', - groupText: 'right-axis-label', - data: [{ - text: this.title, - x: this.range[0] + (this.range[1] - this.range[0])/2, - y: this.boundingRect.y + this.boundingRect.height - this.axisConfig.titlePadding, - fill: this.axisConfig.titleColor, - fontSize: this.axisConfig.titleFontSize, - rotation: 0, - verticalPos: 'center', - horizontalPos: 'bottom', - }] - }) + groupTexts: ['bottom-axis', 'title'], + data: [ + { + text: this.title, + x: this.range[0] + (this.range[1] - this.range[0]) / 2, + y: this.boundingRect.y + this.boundingRect.height - this.axisConfig.titlePadding, + fill: this.axisConfig.titleFill, + fontSize: this.axisConfig.titleFontSize, + rotation: 0, + verticalPos: 'center', + horizontalPos: 'bottom', + }, + ], + }); } return drawableElement; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index 9bf7c33b06..7d46a46b03 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -1,8 +1,8 @@ import { ScaleLinear, scaleLinear } from 'd3'; -import { AxisConfig, Dimension } from '../../Interfaces.js'; +import { log } from '../../../../../logger.js'; +import { AxisConfig } from '../../Interfaces.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; -import { log } from '../../../../../logger.js'; export class LinearAxis extends BaseAxis { private scale: ScaleLinear<number, number>; @@ -24,10 +24,11 @@ export class LinearAxis extends BaseAxis { } recalculateScale(): void { + const domain = [...this.domain]; // copy the array so if reverse is called twise it shouldnot cancel the reverse effect if (this.axisPosition === 'left') { - this.domain.reverse(); // since yaxis in svg start from top + domain.reverse(); // since yaxis in svg start from top } - this.scale = scaleLinear().domain(this.domain).range(this.getRange()); + this.scale = scaleLinear().domain(domain).range(this.getRange()); log.trace('Linear axis final domain, range: ', this.domain, this.getRange()); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index b60fea9056..c6bb8e4083 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -19,7 +19,7 @@ export class LinePlot { } return [ { - groupText: 'line-plot', + groupTexts: ['plot', 'line-plot'], type: 'path', data: [ { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts new file mode 100644 index 0000000000..d3eaf118d7 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts @@ -0,0 +1,21 @@ +import { BoundingRect, DrawableElem } from '../../Interfaces.js'; +export class PlotBorder { + constructor(private boundingRect: BoundingRect) {} + + getDrawableElement(): DrawableElem[] { + const {x, y, width, height} = this.boundingRect; + return [ + { + groupTexts: ['plot', 'chart-border'], + type: 'path', + data: [ + { + path: `M ${x},${y} L ${x + width},${y} L ${x + width},${y + height} L ${x},${y + height} L ${x},${y}`, + strokeFill: '#000000', + strokeWidth: 1, + }, + ], + }, + ]; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 5af28127dc..fb91a053a5 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -11,6 +11,7 @@ import { import { IAxis } from '../axis/index.js'; import { ChartComponent } from './../Interfaces.js'; import { LinePlot } from './LinePlot.js'; +import { PlotBorder } from './PlotBorder.js'; export interface IPlot extends ChartComponent { @@ -59,7 +60,9 @@ export class Plot implements IPlot { if(!(this.xAxis && this.yAxis)) { throw Error("Axes must be passed to render Plots"); } - const drawableElem: DrawableElem[] = []; + const drawableElem: DrawableElem[] = [ + ...new PlotBorder(this.boundingRect).getDrawableElement() + ]; for(const plot of this.chartData.plots) { switch(plot.type) { case ChartPlotEnum.LINE: { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index a47074e738..628965d442 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -23,25 +23,34 @@ export class XYChartBuilder { titleFill: '#000000', titlePadding: 5, showtitle: true, + plotBorderWidth: 2, yAxis: { showLabel: true, labelFontSize: 14, lablePadding: 5, - labelColor: '#000000', + labelFill: '#000000', showTitle: true, titleFontSize: 16, titlePadding: 5, - titleColor: '#000000', + titleFill: '#000000', + showTick: true, + tickLength: 5, + tickWidth: 2, + tickFill: '#000000', }, xAxis: { showLabel: true, labelFontSize: 14, lablePadding: 5, - labelColor: '#000000', + labelFill: '#000000', showTitle: true, titleFontSize: 16, titlePadding: 5, - titleColor: '#000000', + titleFill: '#000000', + showTick: true, + tickLength: 5, + tickWidth: 2, + tickFill: '#000000', }, chartOrientation: OrientationEnum.HORIZONTAL, plotReservedSpacePercent: 50, diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index a871177ce3..dd9b27583a 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -1,13 +1,13 @@ -import { select } from 'd3'; +import { select, Selection } from 'd3'; import { Diagram } from '../../Diagram.js'; import * as configApi from '../../config.js'; import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import { - DrawableElem, - TextElem, - TextHorizontalPos, - TextVerticalPos, + DrawableElem, + TextElem, + TextHorizontalPos, + TextVerticalPos, } from './chartBuilder/Interfaces.js'; export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { @@ -54,6 +54,25 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram // @ts-ignore: TODO Fix ts errors const shapes: DrawableElem[] = diagObj.db.getDrawableElem(); + const groups: Record<string, any> = {}; + + function getGroup(gList: string[]) { + let elem = group; + let prefix = ''; + for (let i = 0; i < gList.length; i++) { + let parent = group; + if (i > 0 && groups[prefix]) { + parent = groups[prefix]; + } + prefix += gList[i]; + elem = groups[prefix]; + if (!elem) { + elem = groups[prefix] = parent.append('g').attr('class', gList[i]); + } + } + return elem; + } + for (const shape of shapes) { if (shape.data.length === 0) { log.trace( @@ -69,7 +88,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram `Drawing shape of type: ${shape.type} with data: ${JSON.stringify(shape.data, null, 2)}` ); - const shapeGroup = group.append('g').attr('class', shape.groupText); + const shapeGroup = getGroup(shape.groupTexts); switch (shape.type) { case 'rect': From 547a22edefa60e89ae652428fa22a7c4aa1c397f Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Thu, 15 Jun 2023 00:04:48 +0530 Subject: [PATCH 005/126] Added support for bar plot --- .../xychart/chartBuilder/Interfaces.ts | 29 +++----------- .../xychart/chartBuilder/Orchestrator.ts | 2 +- .../chartBuilder/components/ChartTitle.ts | 2 +- .../chartBuilder/components/Interfaces.ts | 7 ---- .../chartBuilder/components/axis/BaseAxis.ts | 13 +++++- .../chartBuilder/components/axis/index.ts | 5 ++- .../chartBuilder/components/plot/BarPlot.ts | 40 +++++++++++++++++++ .../chartBuilder/components/plot/index.ts | 8 +++- .../diagrams/xychart/chartBuilder/index.ts | 8 ++++ 9 files changed, 77 insertions(+), 37 deletions(-) delete mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 51350ca258..c7a924eddc 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -1,19 +1,12 @@ export enum ChartPlotEnum { LINE = 'line', + BAR = 'bar', } -export enum ChartLayoutElem { - NULL = 'null', - CHART = 'chart', - TITLE = 'title', - XAXISLABEL = 'xaxislabel', - XAXISTITLE = 'xaxistitle', - YAXISLABEL = 'yaxislabel', - YAXISTITLE = 'yaxistitle', -} -export enum XYChartYAxisPosition { - LEFT = 'left', - RIGHT = 'right', +export interface ChartComponent { + calculateSpace(availableSpace: Dimension): Dimension; + setBoundingBoxXY(point: Point): void; + getDrawableElements(): DrawableElem[]; } export enum OrientationEnum { @@ -21,16 +14,6 @@ export enum OrientationEnum { HORIZONTAL = 'horizontal', } -export type ChartLayout = ChartLayoutElem[][]; - -export type VisibilityOption = { - chartTitle: boolean; - xAxisTitle: boolean; - xAxisLabel: boolean; - yAxisTitle: boolean; - yAxisLabel: boolean; -}; - export interface AxisConfig { showLabel: boolean; labelFontSize: number; @@ -64,7 +47,7 @@ export interface XYChartConfig { export type SimplePlotDataType = [string | number, number][]; export interface LinePlotData { - type: ChartPlotEnum.LINE; + type: ChartPlotEnum.LINE | ChartPlotEnum.BAR; data: SimplePlotDataType; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index dce2cefe9d..25e52cf240 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,7 +1,7 @@ import { log } from '../../../logger.js'; import { DrawableElem, XYChartConfig, XYChartData } from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; -import { ChartComponent } from './components/Interfaces.js'; +import { ChartComponent } from './Interfaces.js'; import { IAxis, getAxis } from './components/axis/index.js'; import { IPlot, getPlotComponent } from './components/plot/index.js'; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index f02d7b05f1..46a1b51d0d 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -8,7 +8,7 @@ import { Point, OrientationEnum, } from '../Interfaces.js'; -import { ChartComponent } from './Interfaces.js'; +import { ChartComponent } from '../Interfaces.js'; export class ChartTitle implements ChartComponent { private boundingRect: BoundingRect; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts deleted file mode 100644 index 92f27986be..0000000000 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Dimension, DrawableElem, OrientationEnum, Point } from '../Interfaces.js'; - -export interface ChartComponent { - calculateSpace(availableSpace: Dimension): Dimension; - setBoundingBoxXY(point: Point): void; - getDrawableElements(): DrawableElem[]; -} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index f6ed16cafa..c341bd4512 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -41,6 +41,11 @@ export abstract class BaseAxis implements IAxis { abstract getTickValues(): Array<string | number>; + getTickInnerPadding(): number { + return this.innerPadding * 2; + // return Math.abs(this.range[0] - this.range[1]) / this.getTickValues().length; + } + private getLabelDimension(): Dimension { return this.textDimensionCalculator.getDimension( this.getTickValues().map((tick) => tick.toString()), @@ -162,7 +167,9 @@ export abstract class BaseAxis implements IAxis { type: 'path', groupTexts: ['left-axis', 'ticks'], data: this.getTickValues().map((tick) => ({ - path: `M ${x},${this.getScaleValue(tick)} L ${x - this.axisConfig.tickLength},${this.getScaleValue(tick)}`, + path: `M ${x},${this.getScaleValue(tick)} L ${ + x - this.axisConfig.tickLength + },${this.getScaleValue(tick)}`, strokeFill: this.axisConfig.tickFill, strokeWidth: this.axisConfig.tickWidth, })), @@ -212,7 +219,9 @@ export abstract class BaseAxis implements IAxis { type: 'path', groupTexts: ['bottom-axis', 'ticks'], data: this.getTickValues().map((tick) => ({ - path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${y + this.axisConfig.tickLength}`, + path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${ + y + this.axisConfig.tickLength + }`, strokeFill: this.axisConfig.tickFill, strokeWidth: this.axisConfig.tickWidth, })), diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index 1972ef2c59..dafa91878e 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -5,15 +5,16 @@ import { LinearAxisDataType } from '../../Interfaces.js'; import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; -import { ChartComponent } from '../Interfaces.js'; +import { ChartComponent } from '../../Interfaces.js'; import { BandAxis } from './BandAxis.js'; import { LinearAxis } from './LinearAxis.js'; -export type AxisPosition = 'left' | 'bottom'; +export type AxisPosition = 'left' | 'bottom' | 'top' | 'bottom'; export interface IAxis extends ChartComponent { getScaleValue(value: string | number): number; setAxisPosition(axisPosition: AxisPosition): void; + getTickInnerPadding(): number; setRange(range: [number, number]): void; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts new file mode 100644 index 0000000000..76187466b9 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -0,0 +1,40 @@ +import { line } from 'd3'; +import { BoundingRect, DrawableElem, SimplePlotDataType } from '../../Interfaces.js'; +import { IAxis } from '../axis/index.js'; + +export class BarPlot { + constructor( + private data: SimplePlotDataType, + private boundingRect: BoundingRect, + private xAxis: IAxis, + private yAxis: IAxis + ) {} + + getDrawableElement(): DrawableElem[] { + const finalData: [number, number][] = this.data.map((d) => [ + this.xAxis.getScaleValue(d[0]), + this.yAxis.getScaleValue(d[1]), + ]); + + const barPaddingPercent = 5; + + const barWidth = this.xAxis.getTickInnerPadding() * (1 - barPaddingPercent / 100); + const barWidthHalf = barWidth / 2; + + return [ + { + groupTexts: ['plot', 'bar-plot'], + type: 'rect', + data: finalData.map((data) => ({ + x: data[0] - barWidthHalf, + y: data[1], + width: barWidth, + height: this.boundingRect.y + this.boundingRect.height - data[1], + fill: '#ff0000', + strokeWidth: 0, + strokeFill: '#0000ff', + })), + }, + ]; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index fb91a053a5..1c807276e5 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -9,9 +9,10 @@ import { ChartPlotEnum, } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; -import { ChartComponent } from './../Interfaces.js'; +import { ChartComponent } from '../../Interfaces.js'; import { LinePlot } from './LinePlot.js'; import { PlotBorder } from './PlotBorder.js'; +import { BarPlot } from './BarPlot.js'; export interface IPlot extends ChartComponent { @@ -70,6 +71,11 @@ export class Plot implements IPlot { drawableElem.push(...linePlot.getDrawableElement()) } break; + case ChartPlotEnum.BAR: { + const barPlot = new BarPlot(plot.data, this.boundingRect, this.xAxis, this.yAxis) + drawableElem.push(...barPlot.getDrawableElement()); + } + break; } } return drawableElem; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 628965d442..2b7f59211c 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -67,6 +67,14 @@ export class XYChartBuilder { }, title: 'this is a sample task', plots: [ + { + type: ChartPlotEnum.BAR, + data: [ + ['category1', 23], + ['category2', 56], + ['category3', 34], + ], + }, { type: ChartPlotEnum.LINE, data: [ From 0a731e1ee10dea19212bfb87ed31f573a305e70c Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Thu, 22 Jun 2023 23:08:08 +0530 Subject: [PATCH 006/126] Added support for horizontal drawing --- .../xychart/chartBuilder/Interfaces.ts | 12 ++- .../xychart/chartBuilder/Orchestrator.ts | 83 ++++++++++++++++++- .../chartBuilder/components/ChartTitle.ts | 5 -- .../chartBuilder/components/axis/BaseAxis.ts | 66 ++++++++++++++- .../chartBuilder/components/axis/index.ts | 3 +- .../chartBuilder/components/plot/BarPlot.ts | 68 ++++++++++----- .../chartBuilder/components/plot/LinePlot.ts | 28 +++++-- .../components/plot/PlotBorder.ts | 21 ++++- .../chartBuilder/components/plot/index.ts | 11 +-- .../diagrams/xychart/chartBuilder/index.ts | 3 + 10 files changed, 247 insertions(+), 53 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index c7a924eddc..b7e29eb809 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -47,11 +47,19 @@ export interface XYChartConfig { export type SimplePlotDataType = [string | number, number][]; export interface LinePlotData { - type: ChartPlotEnum.LINE | ChartPlotEnum.BAR; + type: ChartPlotEnum.LINE; + strokeFill: string, + strokeWidth: number, data: SimplePlotDataType; } -export type PlotData = LinePlotData; +export interface BarPlotData { + type: ChartPlotEnum.BAR; + fill: string, + data: SimplePlotDataType; +} + +export type PlotData = LinePlotData | BarPlotData; export interface BandAxisDataType { title: string; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index 25e52cf240..f76ec95608 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,5 +1,5 @@ import { log } from '../../../logger.js'; -import { DrawableElem, XYChartConfig, XYChartData } from './Interfaces.js'; +import { DrawableElem, OrientationEnum, XYChartConfig, XYChartData } from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; import { ChartComponent } from './Interfaces.js'; import { IAxis, getAxis } from './components/axis/index.js'; @@ -21,7 +21,7 @@ export class Orchestrator { }; } - private calculateSpace() { + private calculateVerticalSpace() { let availableWidth = this.chartConfig.width; let availableHeight = this.chartConfig.height; let chartX = 0; @@ -67,7 +67,7 @@ export class Orchestrator { chartHeight += availableHeight; availableHeight = 0; } - const plotBorderWidthHalf = this.chartConfig.plotBorderWidth/2; + const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; chartX += plotBorderWidthHalf; chartY += plotBorderWidthHalf; chartWidth -= this.chartConfig.plotBorderWidth; @@ -88,6 +88,83 @@ export class Orchestrator { this.componentStore.yAxis.setBoundingBoxXY({ x: 0, y: chartY }); } + private calculateHorizonatalSpace() { + let availableWidth = this.chartConfig.width; + let availableHeight = this.chartConfig.height; + let titleYEnd = 0; + let chartX = 0; + let chartY = 0; + let chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100); + let chartHeight = Math.floor( + (availableHeight * this.chartConfig.plotReservedSpacePercent) / 100 + ); + let spaceUsed = this.componentStore.plot.calculateSpace({ + width: chartWidth, + height: chartHeight, + }); + availableWidth -= spaceUsed.width; + availableHeight -= spaceUsed.height; + + spaceUsed = this.componentStore.title.calculateSpace({ + width: this.chartConfig.width, + height: availableHeight, + }); + log.trace('space used by title: ', spaceUsed); + titleYEnd = spaceUsed.height; + availableHeight -= spaceUsed.height; + this.componentStore.xAxis.setAxisPosition('left'); + spaceUsed = this.componentStore.xAxis.calculateSpace({ + width: availableWidth, + height: availableHeight, + }); + availableWidth -= spaceUsed.width; + chartX = spaceUsed.width; + log.trace('space used by xaxis: ', spaceUsed); + this.componentStore.yAxis.setAxisPosition('top'); + spaceUsed = this.componentStore.yAxis.calculateSpace({ + width: availableWidth, + height: availableHeight, + }); + log.trace('space used by yaxis: ', spaceUsed); + availableHeight -= spaceUsed.height; + chartY = titleYEnd + spaceUsed.height; + if (availableWidth > 0) { + chartWidth += availableWidth; + availableWidth = 0; + } + if (availableHeight > 0) { + chartHeight += availableHeight; + availableHeight = 0; + } + const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; + chartX += plotBorderWidthHalf; + chartY += plotBorderWidthHalf; + chartWidth -= this.chartConfig.plotBorderWidth; + chartHeight -= this.chartConfig.plotBorderWidth; + this.componentStore.plot.calculateSpace({ + width: chartWidth, + height: chartHeight, + }); + + log.trace( + `Final chart dimansion: x = ${chartX}, y = ${chartY}, width = ${chartWidth}, height = ${chartHeight}` + ); + + this.componentStore.plot.setBoundingBoxXY({ x: chartX, y: chartY }); + this.componentStore.yAxis.setRange([chartX, chartX + chartWidth]); + this.componentStore.yAxis.setBoundingBoxXY({ x: chartX, y: titleYEnd }); + this.componentStore.xAxis.setRange([chartY, chartY + chartHeight]); + this.componentStore.xAxis.setBoundingBoxXY({ x: 0, y: chartY }); + } + + private calculateSpace() { + if (this.chartConfig.chartOrientation === OrientationEnum.HORIZONTAL) { + this.calculateHorizonatalSpace(); + } else { + this.calculateVerticalSpace(); + } + } + getDrawableElement() { this.calculateSpace(); const drawableElem: DrawableElem[] = []; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 46a1b51d0d..5c60e2a9e4 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -13,7 +13,6 @@ import { ChartComponent } from '../Interfaces.js'; export class ChartTitle implements ChartComponent { private boundingRect: BoundingRect; private showChartTitle: boolean; - private orientation: OrientationEnum; constructor( private textDimensionCalculator: ITextDimensionCalculator, private chartConfig: XYChartConfig, @@ -26,10 +25,6 @@ export class ChartTitle implements ChartComponent { height: 0, }; this.showChartTitle = !!(this.chartData.title && this.chartConfig.showtitle); - this.orientation = OrientationEnum.VERTICAL; - } - setOrientation(orientation: OrientationEnum): void { - this.orientation = orientation; } setBoundingBoxXY(point: Point): void { this.boundingRect.x = point.x; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index c341bd4512..618ac0c9a9 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -41,6 +41,10 @@ export abstract class BaseAxis implements IAxis { abstract getTickValues(): Array<string | number>; + getTickDistance(): number { + return Math.abs(this.range[0] - this.range[1]) / this.getTickValues().length; + } + getTickInnerPadding(): number { return this.innerPadding * 2; // return Math.abs(this.range[0] - this.range[1]) / this.getTickValues().length; @@ -89,7 +93,7 @@ export abstract class BaseAxis implements IAxis { let availableWidth = availableSpace.width; if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); - this.innerPadding = spaceRequired.width / 2; + this.innerPadding = spaceRequired.height / 2; const widthRequired = spaceRequired.width + this.axisConfig.lablePadding * 2; log.trace('width required for axis label: ', widthRequired); if (widthRequired <= availableWidth) { @@ -122,7 +126,7 @@ export abstract class BaseAxis implements IAxis { this.recalculateScale(); return { width: 0, height: 0 }; } - if (this.axisPosition === 'left') { + if (this.axisPosition === 'left' || this.axisPosition === 'right') { this.calculateSpaceIfDrawnVertical(availableSpace); } else { this.calculateSpaceIfDrawnHorizontally(availableSpace); @@ -247,14 +251,72 @@ export abstract class BaseAxis implements IAxis { } return drawableElement; } + private getDrawaableElementsForTopAxis(): DrawableElem[] { + const drawableElement: DrawableElem[] = []; + if (this.showLabel) { + drawableElement.push({ + type: 'text', + groupTexts: ['bottom-axis', 'label'], + 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, + fill: this.axisConfig.labelFill, + fontSize: this.axisConfig.labelFontSize, + rotation: 0, + verticalPos: 'center', + horizontalPos: 'bottom', + })), + }); + } + if (this.showTick) { + const y = this.boundingRect.y; + drawableElement.push({ + type: 'path', + groupTexts: ['bottom-axis', 'ticks'], + data: this.getTickValues().map((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, + strokeWidth: this.axisConfig.tickWidth, + })), + }); + } + if (this.showTitle) { + drawableElement.push({ + type: 'text', + groupTexts: ['bottom-axis', 'title'], + data: [ + { + text: this.title, + x: this.range[0] + (this.range[1] - this.range[0]) / 2, + y: this.boundingRect.y + this.axisConfig.titlePadding, + fill: this.axisConfig.titleFill, + fontSize: this.axisConfig.titleFontSize, + rotation: 0, + verticalPos: 'center', + horizontalPos: 'top', + }, + ], + }); + } + return drawableElement; + } getDrawableElements(): DrawableElem[] { if (this.axisPosition === 'left') { return this.getDrawaableElementsForLeftAxis(); } + if (this.axisPosition === 'right') { + throw Error("Drawing of right axis is not implemented"); + } if (this.axisPosition === 'bottom') { return this.getDrawaableElementsForBottomAxis(); } + if (this.axisPosition === 'top') { + return this.getDrawaableElementsForTopAxis(); + } return []; } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index dafa91878e..75d1999549 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -9,12 +9,13 @@ import { ChartComponent } from '../../Interfaces.js'; import { BandAxis } from './BandAxis.js'; import { LinearAxis } from './LinearAxis.js'; -export type AxisPosition = 'left' | 'bottom' | 'top' | 'bottom'; +export type AxisPosition = 'left' | 'right' | 'top' | 'bottom'; export interface IAxis extends ChartComponent { getScaleValue(value: string | number): number; setAxisPosition(axisPosition: AxisPosition): void; getTickInnerPadding(): number; + getTickDistance(): number; setRange(range: [number, number]): void; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index 76187466b9..6d29a81b6d 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,40 +1,66 @@ -import { line } from 'd3'; -import { BoundingRect, DrawableElem, SimplePlotDataType } from '../../Interfaces.js'; +import { + BarPlotData, + BoundingRect, + DrawableElem, + OrientationEnum, + SimplePlotDataType, +} from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; export class BarPlot { constructor( - private data: SimplePlotDataType, + private barData: BarPlotData, private boundingRect: BoundingRect, private xAxis: IAxis, - private yAxis: IAxis + private yAxis: IAxis, + private orientation: OrientationEnum ) {} getDrawableElement(): DrawableElem[] { - const finalData: [number, number][] = this.data.map((d) => [ + const finalData: [number, number][] = this.barData.data.map((d) => [ this.xAxis.getScaleValue(d[0]), this.yAxis.getScaleValue(d[1]), ]); const barPaddingPercent = 5; - const barWidth = this.xAxis.getTickInnerPadding() * (1 - barPaddingPercent / 100); + const barWidth = + Math.min(this.xAxis.getTickInnerPadding(), this.xAxis.getTickDistance()) * + (1 - barPaddingPercent / 100); const barWidthHalf = barWidth / 2; - return [ - { - groupTexts: ['plot', 'bar-plot'], - type: 'rect', - data: finalData.map((data) => ({ - x: data[0] - barWidthHalf, - y: data[1], - width: barWidth, - height: this.boundingRect.y + this.boundingRect.height - data[1], - fill: '#ff0000', - strokeWidth: 0, - strokeFill: '#0000ff', - })), - }, - ]; + if (this.orientation === OrientationEnum.HORIZONTAL) { + return [ + { + groupTexts: ['plot', 'bar-plot'], + type: 'rect', + data: finalData.map((data) => ({ + x: this.boundingRect.x, + y: data[0] - barWidthHalf, + height: barWidth, + width: data[1] - this.boundingRect.x, + fill: this.barData.fill, + strokeWidth: 0, + strokeFill: this.barData.fill, + })), + }, + ]; + } else { + return [ + { + groupTexts: ['plot', 'bar-plot'], + type: 'rect', + data: finalData.map((data) => ({ + x: data[0] - barWidthHalf, + y: data[1], + width: barWidth, + height: this.boundingRect.y + this.boundingRect.height - data[1], + fill: this.barData.fill, + strokeWidth: 0, + strokeFill: this.barData.fill, + })), + }, + ]; + } } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index c6bb8e4083..d35722618d 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -1,19 +1,31 @@ import { line } from 'd3'; -import { DrawableElem, SimplePlotDataType } from '../../Interfaces.js'; +import { DrawableElem, LinePlotData, OrientationEnum } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; export class LinePlot { - constructor(private data: SimplePlotDataType, private xAxis: IAxis, private yAxis: IAxis) {} + constructor( + private plotData: LinePlotData, + private xAxis: IAxis, + private yAxis: IAxis, + private orientation: OrientationEnum + ) {} getDrawableElement(): DrawableElem[] { - const finalData: [number, number][] = this.data.map((d) => [ + const finalData: [number, number][] = this.plotData.data.map((d) => [ this.xAxis.getScaleValue(d[0]), this.yAxis.getScaleValue(d[1]), ]); - const path = line() - .x((d) => d[0]) - .y((d) => d[1])(finalData); + let path: string | null; + if (this.orientation === OrientationEnum.HORIZONTAL) { + path = line() + .y((d) => d[0]) + .x((d) => d[1])(finalData); + } else { + path = line() + .x((d) => d[0]) + .y((d) => d[1])(finalData); + } if (!path) { return []; } @@ -24,8 +36,8 @@ export class LinePlot { data: [ { path, - strokeFill: '#0000ff', - strokeWidth: 2, + strokeFill: this.plotData.strokeFill, + strokeWidth: this.plotData.strokeWidth, }, ], }, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts index d3eaf118d7..ee5f5e19cd 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts @@ -1,16 +1,31 @@ -import { BoundingRect, DrawableElem } from '../../Interfaces.js'; +import { BoundingRect, DrawableElem, OrientationEnum } from '../../Interfaces.js'; export class PlotBorder { - constructor(private boundingRect: BoundingRect) {} + constructor(private boundingRect: BoundingRect, private orientation: OrientationEnum) {} getDrawableElement(): DrawableElem[] { const {x, y, width, height} = this.boundingRect; + if(this.orientation === OrientationEnum.HORIZONTAL) { return [ { groupTexts: ['plot', 'chart-border'], type: 'path', data: [ { - path: `M ${x},${y} L ${x + width},${y} L ${x + width},${y + height} L ${x},${y + height} L ${x},${y}`, + path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${y + height} L ${x},${y}`, + strokeFill: '#000000', + strokeWidth: 1, + }, + ], + }, + ]; + } + return [ + { + groupTexts: ['plot', 'chart-border'], + type: 'path', + data: [ + { + path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${y + height} L ${x},${y}`, strokeFill: '#000000', strokeWidth: 1, }, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 1c807276e5..92b3668f23 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -21,7 +21,6 @@ export interface IPlot extends ChartComponent { export class Plot implements IPlot { private boundingRect: BoundingRect; - private orientation: OrientationEnum; private xAxis?: IAxis; private yAxis?: IAxis; @@ -35,15 +34,11 @@ export class Plot implements IPlot { width: 0, height: 0, }; - this.orientation = OrientationEnum.VERTICAL; } setAxes(xAxis: IAxis, yAxis: IAxis) { this.xAxis = xAxis; this.yAxis = yAxis; } - setOrientation(orientation: OrientationEnum): void { - this.orientation = orientation; - } setBoundingBoxXY(point: Point): void { this.boundingRect.x = point.x; this.boundingRect.y = point.y; @@ -62,17 +57,17 @@ export class Plot implements IPlot { throw Error("Axes must be passed to render Plots"); } const drawableElem: DrawableElem[] = [ - ...new PlotBorder(this.boundingRect).getDrawableElement() + ...new PlotBorder(this.boundingRect, this.chartConfig.chartOrientation).getDrawableElement() ]; for(const plot of this.chartData.plots) { switch(plot.type) { case ChartPlotEnum.LINE: { - const linePlot = new LinePlot(plot.data, this.xAxis, this.yAxis); + const linePlot = new LinePlot(plot, this.xAxis, this.yAxis, this.chartConfig.chartOrientation); drawableElem.push(...linePlot.getDrawableElement()) } break; case ChartPlotEnum.BAR: { - const barPlot = new BarPlot(plot.data, this.boundingRect, this.xAxis, this.yAxis) + const barPlot = new BarPlot(plot, this.boundingRect, this.xAxis, this.yAxis, this.chartConfig.chartOrientation) drawableElem.push(...barPlot.getDrawableElement()); } break; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 2b7f59211c..834834f8e1 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -69,6 +69,7 @@ export class XYChartBuilder { plots: [ { type: ChartPlotEnum.BAR, + fill: '#0000bb', data: [ ['category1', 23], ['category2', 56], @@ -77,6 +78,8 @@ export class XYChartBuilder { }, { type: ChartPlotEnum.LINE, + strokeFill: '#bb0000', + strokeWidth: 2, data: [ ['category1', 33], ['category2', 45], From 29ab2dec597eb6fd7b154f97653351a606a06e2c Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 1 Jul 2023 20:07:15 +0530 Subject: [PATCH 007/126] Now jison can parse xAxis and yAxis --- .../src/diagrams/xychart/parser/xychart.jison | 65 +++++++- .../xychart/parser/xychart.jison.spec.ts | 140 ++++++++++++++++++ 2 files changed, 201 insertions(+), 4 deletions(-) create mode 100644 packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index d8e0d08d08..66e160ac0c 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -12,6 +12,15 @@ %x acc_title %x acc_descr %x acc_descr_multiline +%x chart_config +%x chart_orientation +%x x_axis +%x y_axis +%x axis_title +%x axis_data +%x axis_data_band +%x axis_data_band_capture +%x axis_data_band_str %% \%\%\{ { this.begin('open_directive'); return 'open_directive'; } <open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } @@ -34,6 +43,34 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} <acc_descr_multiline>[\}] { this.popState(); } <acc_descr_multiline>[^\}]* return "acc_descr_multiline_value"; +" "*"xychart-beta" {this.begin("chart_config"); return 'XYCHART';} +<chart_config>" "+("vertical"|"horizontal") {this.begin("chart_orientation"); return 'chart_orientation';} +<chart_orientation>[\s]* {this.popState(); this.popState(); return 'CHART_CONFIG_END';} +<chart_config>[\s]* {this.popState(); return 'CHART_CONFIG_END';} + +"x-axis"" "* { this.begin("x_axis"); return "X_AXIS";} +"y-axis"" "* { this.begin("y_axis"); return "Y_AXIS";} +<x_axis,y_axis>["] {this.begin("axis_title");} +<axis_title>[^"]+ {return 'AXIS_TITLE';} +<axis_title>["]" "*(\r?\n) {this.popState(); this.popState();} +<axis_title>["]" "* {this.popState(); this.begin("axis_data");} +<x_axis,y_axis>[^\s]+" "*(\r?\n) {this.popState(); return 'AXIS_TITLE';} +<x_axis,y_axis>[^\s]+" "* {this.begin("axis_data"); return 'AXIS_TITLE'; } + +<axis_data>[+-]?\d+(\.\d+)?" "*"-->"" "*[+-]?\d+(\.\d+)?" "* { return 'AXIS_RANGE_DATA';} + +<axis_data>[\[]" "* {this.begin("axis_data_band"); this.begin("axis_data_band_capture")} +<axis_data_band>[,]" "* {this.begin("axis_data_band_capture")} +<axis_data_band_capture>["] {this.begin("axis_data_band_str");} +<axis_data_band_str>[^"]+ {return "AXIS_BAND_DATA";} +<axis_data_band_str>["]" "* {this.popState(); this.popState();} +<axis_data_band_capture>[^\s]+" "* {this.popState(); return "AXIS_BAND_DATA"} +<axis_data_band>[\]]" "* {this.popState(); return "AXIS_BAND_DATA_END"} + + +<axis_data>[\r\n]+ {this.popState(); this.popState();} + + ["][`] { this.begin("md_string");} <md_string>[^`"]+ { return "MD_STR";} @@ -42,8 +79,6 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} <string>["] this.popState(); <string>[^"]* return "STR"; -" "*"xychart"" "* return 'XYCHART'; - [A-Za-z]+ return 'ALPHA'; ":" return 'COLON'; \+ return 'PLUS'; @@ -72,9 +107,14 @@ start : eol start | SPACE start | directive start - | XYCHART document + | XYCHART chartConfig CHART_CONFIG_END document + | XYCHART CHART_CONFIG_END document ; +chartConfig + : chart_orientation {yy.setOrientation($1.trim());} + ; + document : /* empty */ | document line @@ -88,8 +128,25 @@ statement : | SPACE statement | directive + | X_AXIS parseXAxis + | Y_AXIS parseYAxis ; +parseXAxis + : AXIS_TITLE {yy.setXAxisTitle($1.trim());} + | AXIS_TITLE xAxisBandData {yy.setXAxisTitle($1.trim());} + | AXIS_TITLE AXIS_RANGE_DATA {yy.setXAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setXAxisRangeData(Number($$[0]), Number($$[1]));} + ; + +xAxisBandData + : AXIS_BAND_DATA xAxisBandData {yy.addXAxisBand($1.trim());} + | AXIS_BAND_DATA_END + ; + +parseYAxis + : AXIS_TITLE {yy.setYAxisTitle($1.trim());} + | AXIS_TITLE AXIS_RANGE_DATA {yy.setYAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setYAxisRangeData(Number($$[0]), Number($$[1]));} + ; directive : openDirective typeDirective closeDirective @@ -115,7 +172,7 @@ argDirective ; closeDirective - : close_directive { yy.parseDirective('}%%', 'close_directive', 'quadrantChart'); } + : close_directive { yy.parseDirective('}%%', 'close_directive', 'xychart'); } ; text: alphaNumToken diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts new file mode 100644 index 0000000000..029e90356a --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -0,0 +1,140 @@ +// @ts-ignore: TODO Fix ts errors +import { parser } from './xychart.jison'; +import { Mock, vi } from 'vitest'; + +const parserFnConstructor = (str: string) => { + return () => { + parser.parse(str); + }; +}; + +const mockDB: Record<string, Mock<any, any>> = { + parseDirective: vi.fn(), + setOrientation: vi.fn(), + setXAxisTitle: vi.fn(), + setXAxisRangeData: vi.fn(), + addXAxisBand: vi.fn(), + setYAxisTitle: vi.fn(), + setYAxisRangeData: vi.fn(), + addYAxisBand: vi.fn(), +}; + +function clearMocks() { + for (const key in mockDB) { + mockDB[key].mockRestore(); + } +} + +describe('Testing xychart jison file', () => { + beforeEach(() => { + parser.yy = mockDB; + clearMocks(); + }); + + it('should throw error if xychart-beta text is not there', () => { + const str = 'xychart-beta-1'; + expect(parserFnConstructor(str)).toThrow(); + }); + + it('should not throw error if only xychart is there', () => { + const str = 'xychart-beta'; + expect(parserFnConstructor(str)).not.toThrow(); + }); + + it('should be able to parse directive', () => { + const str = + '%%{init: {"xychart": {"chartWidth": 600, "chartHeight": 600} } }%% \n xychart-beta'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.parseDirective.mock.calls[0]).toEqual(['%%{', 'open_directive']); + expect(mockDB.parseDirective.mock.calls[1]).toEqual(['init', 'type_directive']); + expect(mockDB.parseDirective.mock.calls[2]).toEqual([ + '{"xychart": {"chartWidth": 600, "chartHeight": 600} }', + 'arg_directive', + ]); + expect(mockDB.parseDirective.mock.calls[3]).toEqual(['}%%', 'close_directive', 'xychart']); + }); + + it('parse chart orientation', () => { + let str = 'xychart-beta vertical'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setOrientation).toHaveBeenCalledWith('vertical'); + + clearMocks(); + + str = 'xychart-beta horizontal '; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setOrientation).toHaveBeenCalledWith('horizontal'); + + str = 'xychart-beta abc'; + expect(parserFnConstructor(str)).toThrow(); + }); + + it('parse x-axis', () => { + let str = 'xychart-beta \nx-axis xAxisName\n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + + clearMocks(); + + str = 'xychart-beta \nx-axis xAxisName \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + + clearMocks(); + + str = 'xychart-beta \n x-axis "xAxisName has space"\n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName has space'); + + clearMocks(); + + str = 'xychart-beta \n x-axis " xAxisName has space " \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName has space'); + + clearMocks(); + str = 'xychart-beta \nx-axis xAxisName 45.5 --> 33 \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 33); + + clearMocks(); + + str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2 ] \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.addXAxisBand).toHaveBeenCalledTimes(2); + expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(1, "cat2"); + expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(2, "cat1"); + }); + it('parse y-axis', () => { + let str = 'xychart-beta \ny-axis yAxisName\n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + + clearMocks(); + + str = 'xychart-beta \ny-axis yAxisName \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + + clearMocks(); + + str = 'xychart-beta \n y-axis "yAxisName has space"\n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName has space'); + + clearMocks(); + + str = 'xychart-beta \n y-axis " yAxisName has space " \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName has space'); + + clearMocks(); + str = 'xychart-beta \ny-axis yAxisName 45.5 --> 33 \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33); + + }); +}); From d69a8aeb63e59a04c63d91b6c11c775a7e4f8477 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 1 Jul 2023 22:14:33 +0530 Subject: [PATCH 008/126] Added full jison for bar and line chart --- .../src/diagrams/xychart/parser/xychart.jison | 186 +++++++++++------- .../xychart/parser/xychart.jison.spec.ts | 58 +++++- 2 files changed, 167 insertions(+), 77 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 66e160ac0c..047eeebc53 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -21,81 +21,107 @@ %x axis_data_band %x axis_data_band_capture %x axis_data_band_str +%x line +%x line_title +%x line_data +%x line_data_entries +%x bar +%x bar_title +%x bar_data +%x bar_data_entries %% -\%\%\{ { this.begin('open_directive'); return 'open_directive'; } -<open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } -<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; } -<type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; } -<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive'; -\%\%(?!\{)[^\n]* /* skip comments */ -[^\}]\%\%[^\n]* /* skip comments */ -[\n\r]+ return 'NEWLINE'; -\%\%[^\n]* /* do nothing */ - -title { this.begin("title");return 'title'; } -<title>(?!\n|;|#)*[^\n]* { this.popState(); return "title_value"; } - -accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; } -<acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; } -accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; } -<acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } -accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} -<acc_descr_multiline>[\}] { this.popState(); } -<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value"; - -" "*"xychart-beta" {this.begin("chart_config"); return 'XYCHART';} +\%\%\{ { this.begin('open_directive'); return 'open_directive'; } +<open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } +<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; } +<type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; } +<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive'; +\%\%(?!\{)[^\n]* /* skip comments */ +[^\}]\%\%[^\n]* /* skip comments */ +[\n\r]+ return 'NEWLINE'; +\%\%[^\n]* /* do nothing */ + +title { this.begin("title");return 'title'; } +<title>(?!\n|;|#)*[^\n]* { this.popState(); return "title_value"; } + +accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; } +<acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; } +accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; } +<acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } +accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} +<acc_descr_multiline>[\}] { this.popState(); } +<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value"; + +" "*"xychart-beta" {this.begin("chart_config"); return 'XYCHART';} <chart_config>" "+("vertical"|"horizontal") {this.begin("chart_orientation"); return 'chart_orientation';} -<chart_orientation>[\s]* {this.popState(); this.popState(); return 'CHART_CONFIG_END';} -<chart_config>[\s]* {this.popState(); return 'CHART_CONFIG_END';} - -"x-axis"" "* { this.begin("x_axis"); return "X_AXIS";} -"y-axis"" "* { this.begin("y_axis"); return "Y_AXIS";} -<x_axis,y_axis>["] {this.begin("axis_title");} -<axis_title>[^"]+ {return 'AXIS_TITLE';} -<axis_title>["]" "*(\r?\n) {this.popState(); this.popState();} -<axis_title>["]" "* {this.popState(); this.begin("axis_data");} -<x_axis,y_axis>[^\s]+" "*(\r?\n) {this.popState(); return 'AXIS_TITLE';} -<x_axis,y_axis>[^\s]+" "* {this.begin("axis_data"); return 'AXIS_TITLE'; } - -<axis_data>[+-]?\d+(\.\d+)?" "*"-->"" "*[+-]?\d+(\.\d+)?" "* { return 'AXIS_RANGE_DATA';} - -<axis_data>[\[]" "* {this.begin("axis_data_band"); this.begin("axis_data_band_capture")} -<axis_data_band>[,]" "* {this.begin("axis_data_band_capture")} -<axis_data_band_capture>["] {this.begin("axis_data_band_str");} -<axis_data_band_str>[^"]+ {return "AXIS_BAND_DATA";} -<axis_data_band_str>["]" "* {this.popState(); this.popState();} -<axis_data_band_capture>[^\s]+" "* {this.popState(); return "AXIS_BAND_DATA"} -<axis_data_band>[\]]" "* {this.popState(); return "AXIS_BAND_DATA_END"} - - -<axis_data>[\r\n]+ {this.popState(); this.popState();} - - - -["][`] { this.begin("md_string");} -<md_string>[^`"]+ { return "MD_STR";} -<md_string>[`]["] { this.popState();} -["] this.begin("string"); -<string>["] this.popState(); -<string>[^"]* return "STR"; - -[A-Za-z]+ return 'ALPHA'; -":" return 'COLON'; -\+ return 'PLUS'; -"," return 'COMMA'; -"=" return 'EQUALS'; -\= return 'EQUALS'; -"*" return 'MULT'; -\# return 'BRKT'; -[\_] return 'UNDERSCORE'; -"." return 'DOT'; -"&" return 'AMP'; -\- return 'MINUS'; -[0-9]+ return 'NUM'; -\s return 'SPACE'; -";" return 'SEMI'; -[!"#$%&'*+,-.`?\\_/] return 'PUNCTUATION'; -<<EOF>> return 'EOF'; +<chart_orientation>[\s]* {this.popState(); this.popState(); return 'CHART_CONFIG_END';} +<chart_config>[\s]* {this.popState(); return 'CHART_CONFIG_END';} + +"x-axis"" "* { this.begin("x_axis"); return "X_AXIS";} +"y-axis"" "* { this.begin("y_axis"); return "Y_AXIS";} +<x_axis,y_axis>["] {this.begin("axis_title");} +<axis_title>[^"]+ {return 'AXIS_TITLE';} +<axis_title>["]" "*(\r?\n) {this.popState(); this.popState();} +<axis_title>["]" "* {this.popState(); this.begin("axis_data");} +<x_axis,y_axis>[^\s]+" "*(\r?\n) {this.popState(); return 'AXIS_TITLE';} +<x_axis,y_axis>[^\s]+" "* {this.begin("axis_data"); return 'AXIS_TITLE'; } + +<axis_data>[+-]?\d+(?:\.\d+)?" "*"-->"" "*[+-]?\d+(?:\.\d+)?" "* { return 'AXIS_RANGE_DATA';} + +<axis_data>[\[]" "* {this.begin("axis_data_band"); this.begin("axis_data_band_capture")} +<axis_data_band>[,]" "* {this.begin("axis_data_band_capture")} +<axis_data_band_capture>["] {this.begin("axis_data_band_str");} +<axis_data_band_str>[^"]+ {return "AXIS_BAND_DATA";} +<axis_data_band_str>["]" "* {this.popState(); this.popState();} +<axis_data_band_capture>[^\s]+" "* {this.popState(); return "AXIS_BAND_DATA"} +<axis_data_band>[\]]" "* {this.popState(); return "AXIS_BAND_DATA_END"} +<axis_data>[\r\n]+ {this.popState(); this.popState();} + + +"line"" "* {this.begin("line"); return 'LINE';} +<line>["] {this.begin("line_title");} +<line_title>[^"]+ {return 'LINE_TITLE';} +<line_title>["]" "* {this.popState(); this.begin("line_data");} +<line_data>"["" "* {this.begin('line_data_entries');} +<line_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'LINE_DATA'} +<line_data_entries>"]"" "* {this.popState(); this.popState(); this.popState()} +<line>[^\s]+" "* {this.begin("line_data"); return 'LINE_TITLE';} + +"bar"" "* {this.begin("bar"); return 'BAR';} +<bar>["] {this.begin("bar_title");} +<bar_title>[^"]+ {return 'BAR_TITLE';} +<bar_title>["]" "* {this.popState(); this.begin("bar_data");} +<bar_data>"["" "* {this.begin('bar_data_entries');} +<bar_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'BAR_DATA'} +<bar_data_entries>"]"" "* {this.popState(); this.popState(); this.popState()} +<bar>[^\s]+" "* {this.begin("bar_data"); return 'BAR_TITLE';} + + + + +["][`] { this.begin("md_string");} +<md_string>[^`"]+ { return "MD_STR";} +<md_string>[`]["] { this.popState();} +["] this.begin("string"); +<string>["] this.popState(); +<string>[^"]* return "STR"; + +[A-Za-z]+ return 'ALPHA'; +":" return 'COLON'; +\+ return 'PLUS'; +"," return 'COMMA'; +"=" return 'EQUALS'; +\= return 'EQUALS'; +"*" return 'MULT'; +\# return 'BRKT'; +[\_] return 'UNDERSCORE'; +"." return 'DOT'; +"&" return 'AMP'; +\- return 'MINUS'; +[0-9]+ return 'NUM'; +\s return 'SPACE'; +";" return 'SEMI'; +[!"#$%&'*+,-.`?\\_/] return 'PUNCTUATION'; +<<EOF>> return 'EOF'; /lex @@ -130,10 +156,20 @@ statement | directive | X_AXIS parseXAxis | Y_AXIS parseYAxis + | parseLine + | parseBar ; +parseLine + : LINE LINE_TITLE LINE_DATA {yy.addLineData($2.trim(), $3.split(',').map(d => Number(d.trim())));} + ; + +parseBar + : BAR BAR_TITLE BAR_DATA {yy.addBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));} + ; + parseXAxis - : AXIS_TITLE {yy.setXAxisTitle($1.trim());} + : AXIS_TITLE statement {yy.setXAxisTitle($1.trim());} | AXIS_TITLE xAxisBandData {yy.setXAxisTitle($1.trim());} | AXIS_TITLE AXIS_RANGE_DATA {yy.setXAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setXAxisRangeData(Number($$[0]), Number($$[1]));} ; @@ -144,7 +180,7 @@ xAxisBandData ; parseYAxis - : AXIS_TITLE {yy.setYAxisTitle($1.trim());} + : AXIS_TITLE statement {yy.setYAxisTitle($1.trim());} | AXIS_TITLE AXIS_RANGE_DATA {yy.setYAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setYAxisRangeData(Number($$[0]), Number($$[1]));} ; diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 029e90356a..1ce73abf36 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -17,6 +17,8 @@ const mockDB: Record<string, Mock<any, any>> = { setYAxisTitle: vi.fn(), setYAxisRangeData: vi.fn(), addYAxisBand: vi.fn(), + addLineData: vi.fn(), + addBarData: vi.fn(), }; function clearMocks() { @@ -104,8 +106,8 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); expect(mockDB.addXAxisBand).toHaveBeenCalledTimes(2); - expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(1, "cat2"); - expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(2, "cat1"); + expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(1, 'cat2'); + expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(2, 'cat1'); }); it('parse y-axis', () => { let str = 'xychart-beta \ny-axis yAxisName\n'; @@ -135,6 +137,58 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33); + }); + it('parse line Data', () => { + let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line lineTitle [23, 45, 56.6]'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle', [23, 45, 56.6]); + clearMocks(); + + str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -45 , 56.6 ] '; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle with space', [23, -45, 56.6]); + + clearMocks(); + str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -4aa5 , 56.6 ] '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse bar Data', () => { + let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle [23, 45, 56.6]'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle', [23, 45, 56.6]); + + clearMocks(); + + str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -45 , 56.6 ] '; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle with space', [23, -45, 56.6]); + clearMocks(); + + str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -4aa5 , 56.6 ] '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse multiple bar and line', () => { + let str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle1 [23, 45, 56.6] \n line lineTitle1 [11, 45.5, 67, 23] \n bar barTitle2 [13, 42, 56.89] \n line lineTitle2 [45, 99, 012]'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle1', [23, 45, 56.6]); + expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle2', [13, 42, 56.89]); + expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle1', [11, 45.5, 67, 23]); + expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle2', [45, 99, 12]); }); }); From 1d98ead5c2e4dfed1dfddbb4df3ef997d6aff3d8 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 2 Jul 2023 13:18:28 +0530 Subject: [PATCH 009/126] Added support for Diagram title --- packages/mermaid/src/diagrams/xychart/parser/xychart.jison | 1 + .../src/diagrams/xychart/parser/xychart.jison.spec.ts | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 047eeebc53..0f211fe878 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -154,6 +154,7 @@ statement : | SPACE statement | directive + | title title_value { $$=$2.trim();yy.setDiagramTitle($$); } | X_AXIS parseXAxis | Y_AXIS parseYAxis | parseLine diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 1ce73abf36..a999d9b8d5 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -11,6 +11,7 @@ const parserFnConstructor = (str: string) => { const mockDB: Record<string, Mock<any, any>> = { parseDirective: vi.fn(), setOrientation: vi.fn(), + setDiagramTitle: vi.fn(), setXAxisTitle: vi.fn(), setXAxisRangeData: vi.fn(), addXAxisBand: vi.fn(), @@ -43,6 +44,12 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); }); + it('parse title of the chart', () => { + const str = 'xychart-beta \n title This is a title'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('This is a title'); + }); + it('should be able to parse directive', () => { const str = '%%{init: {"xychart": {"chartWidth": 600, "chartHeight": 600} } }%% \n xychart-beta'; From ebd329149b0a6cd08196ae38a09f74df7621abfb Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 2 Jul 2023 17:14:12 +0530 Subject: [PATCH 010/126] Able to draw till axis from chart configuration - there is some issue with drawing the plot from chart data --- demos/xychart.html | 14 +- packages/mermaid/src/config.type.ts | 32 +++++ .../xychart/chartBuilder/Interfaces.ts | 53 +------ .../xychart/chartBuilder/Orchestrator.ts | 5 +- .../chartBuilder/components/ChartTitle.ts | 3 +- .../chartBuilder/components/axis/index.ts | 15 +- .../chartBuilder/components/plot/BarPlot.ts | 7 +- .../chartBuilder/components/plot/LinePlot.ts | 7 +- .../components/plot/PlotBorder.ts | 41 +++--- .../chartBuilder/components/plot/index.ts | 3 +- .../diagrams/xychart/chartBuilder/index.ts | 103 +------------- .../src/diagrams/xychart/parser/xychart.jison | 23 ++- .../xychart/parser/xychart.jison.spec.ts | 66 ++++++--- .../mermaid/src/diagrams/xychart/xychartDb.ts | 134 +++++++++++++++++- 14 files changed, 282 insertions(+), 224 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index 6595b56737..13d5dfde9a 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -16,11 +16,23 @@ <body> <h1>XY Charts demos</h1> <pre class="mermaid"> - xychart + xychart-beta horizontal + title Basic xychart + x-axis "this is x axis" [category1, "category 2", category3] + y-axis yaxisText 10 --> 150 </pre> <hr /> + <h1>XY Charts demos</h1> + <pre class="mermaid"> + xychart-beta + title Basic xychart + x-axis "this is x axis" [category1, "category 2", category3] + y-axis yaxisText 10 --> 150 + </pre> + + <hr /> <script type="module"> import mermaid from './mermaid.esm.mjs'; mermaid.initialize({ diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index df87e9c406..aa9f2b81ed 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -150,6 +150,7 @@ export interface MermaidConfig { er?: ErDiagramConfig; pie?: PieDiagramConfig; quadrantChart?: QuadrantChartConfig; + xyChart?: XYChartConfig; requirement?: RequirementDiagramConfig; mindmap?: MindmapDiagramConfig; gitGraph?: GitGraphDiagramConfig; @@ -703,6 +704,37 @@ export interface QuadrantChartConfig extends BaseDiagramConfig { */ quadrantExternalBorderStrokeWidth?: number; } + +export interface XYChartAxisConfig { + showLabel: boolean; + labelFontSize: number; + lablePadding: number; + labelFill: string; + showTitle: boolean; + titleFontSize: number; + titlePadding: number; + titleFill: string; + showTick: boolean; + tickLength: number; + tickWidth: number; + tickFill: string; +} + +export interface XYChartConfig extends BaseDiagramConfig { + width: number; + height: number; + fontFamily: string; + titleFontSize: number; + titleFill: string; + titlePadding: number; + showtitle: boolean; + xAxis: XYChartAxisConfig; + yAxis: XYChartAxisConfig; + plotBorderWidth: number; + chartOrientation: 'vertical' | 'horizontal'; + plotReservedSpacePercent: number; +} + /** * The object containing configurations specific for entity relationship diagrams * diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index b7e29eb809..e519d0a016 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -9,41 +9,6 @@ export interface ChartComponent { getDrawableElements(): DrawableElem[]; } -export enum OrientationEnum { - VERTICAL = 'vertical', - HORIZONTAL = 'horizontal', -} - -export interface AxisConfig { - showLabel: boolean; - labelFontSize: number; - lablePadding: number; - labelFill: string; - showTitle: boolean; - titleFontSize: number; - titlePadding: number; - titleFill: string; - showTick: boolean; - tickLength: number; - tickWidth: number; - tickFill: string; -} - -export interface XYChartConfig { - width: number; - height: number; - fontFamily: string; - titleFontSize: number; - titleFill: string; - titlePadding: number; - showtitle: boolean; - xAxis: AxisConfig; - yAxis: AxisConfig; - plotBorderWidth: number; - chartOrientation: OrientationEnum; - plotReservedSpacePercent: number; -} - export type SimplePlotDataType = [string | number, number][]; export interface LinePlotData { @@ -74,6 +39,11 @@ export interface LinearAxisDataType{ export type AxisDataType = LinearAxisDataType | BandAxisDataType; +export function isBandAxisData(data: any): data is BandAxisDataType { + return data.categories && Array.isArray(data.categories); +} + + export interface XYChartData { xAxis: AxisDataType; yAxis: AxisDataType; @@ -88,19 +58,6 @@ export interface Dimension { export interface BoundingRect extends Point, Dimension {} -export interface XYChartSpaceProperty extends BoundingRect { - orientation: OrientationEnum; -} - -export interface XYChartSpace { - chart: XYChartSpaceProperty; - title: XYChartSpaceProperty; - xAxisLabels: XYChartSpaceProperty; - xAxisTitle: XYChartSpaceProperty; - yAxisLabel: XYChartSpaceProperty; - yAxisTitle: XYChartSpaceProperty; -} - export interface Point { x: number; y: number; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index f76ec95608..b7ab4ca140 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,9 +1,10 @@ import { log } from '../../../logger.js'; -import { DrawableElem, OrientationEnum, XYChartConfig, XYChartData } from './Interfaces.js'; +import { DrawableElem, XYChartData } from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; import { ChartComponent } from './Interfaces.js'; import { IAxis, getAxis } from './components/axis/index.js'; import { IPlot, getPlotComponent } from './components/plot/index.js'; +import { XYChartConfig } from '../../../config.type.js'; export class Orchestrator { private componentStore: { @@ -158,7 +159,7 @@ export class Orchestrator { } private calculateSpace() { - if (this.chartConfig.chartOrientation === OrientationEnum.HORIZONTAL) { + if (this.chartConfig.chartOrientation === 'horizontal') { this.calculateHorizonatalSpace(); } else { this.calculateVerticalSpace(); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 5c60e2a9e4..ae70994717 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -1,14 +1,13 @@ import { ITextDimensionCalculator, TextDimensionCalculator } from '../TextDimensionCalculator.js'; import { - XYChartConfig, XYChartData, Dimension, BoundingRect, DrawableElem, Point, - OrientationEnum, } from '../Interfaces.js'; import { ChartComponent } from '../Interfaces.js'; +import { XYChartConfig } from '../../../../config.type.js'; export class ChartTitle implements ChartComponent { private boundingRect: BoundingRect; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index 75d1999549..7888ac286b 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,13 +1,12 @@ import { - AxisConfig, AxisDataType, - BandAxisDataType, - LinearAxisDataType + isBandAxisData, } from '../../Interfaces.js'; import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { ChartComponent } from '../../Interfaces.js'; import { BandAxis } from './BandAxis.js'; import { LinearAxis } from './LinearAxis.js'; +import { XYChartAxisConfig } from '../../../../../config.type.js'; export type AxisPosition = 'left' | 'right' | 'top' | 'bottom'; @@ -19,15 +18,7 @@ export interface IAxis extends ChartComponent { setRange(range: [number, number]): void; } -function isLinearAxisData(data: any): data is LinearAxisDataType { - return !(Number.isNaN(data.min) || Number.isNaN(data.max)); -} - -function isBandAxisData(data: any): data is BandAxisDataType { - return data.categories && Array.isArray(data.categories); -} - -export function getAxis(data: AxisDataType, axisConfig: AxisConfig): IAxis { +export function getAxis(data: AxisDataType, axisConfig: XYChartAxisConfig): IAxis { const textDimansionCalculator = new TextDimensionCalculator(); if (isBandAxisData(data)) { return new BandAxis(axisConfig, data.categories, data.title, textDimansionCalculator); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index 6d29a81b6d..5b4a22f4a3 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,9 +1,8 @@ +import { XYChartConfig } from '../../../../../config.type.js'; import { BarPlotData, BoundingRect, DrawableElem, - OrientationEnum, - SimplePlotDataType, } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; @@ -13,7 +12,7 @@ export class BarPlot { private boundingRect: BoundingRect, private xAxis: IAxis, private yAxis: IAxis, - private orientation: OrientationEnum + private orientation: XYChartConfig['chartOrientation'] ) {} getDrawableElement(): DrawableElem[] { @@ -29,7 +28,7 @@ export class BarPlot { (1 - barPaddingPercent / 100); const barWidthHalf = barWidth / 2; - if (this.orientation === OrientationEnum.HORIZONTAL) { + if (this.orientation === 'horizontal') { return [ { groupTexts: ['plot', 'bar-plot'], diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index d35722618d..e342352b8e 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -1,13 +1,14 @@ import { line } from 'd3'; -import { DrawableElem, LinePlotData, OrientationEnum } from '../../Interfaces.js'; +import { DrawableElem, LinePlotData } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; +import { XYChartConfig } from '../../../../../config.type.js'; export class LinePlot { constructor( private plotData: LinePlotData, private xAxis: IAxis, private yAxis: IAxis, - private orientation: OrientationEnum + private orientation: XYChartConfig['chartOrientation'] ) {} getDrawableElement(): DrawableElem[] { @@ -17,7 +18,7 @@ export class LinePlot { ]); let path: string | null; - if (this.orientation === OrientationEnum.HORIZONTAL) { + if (this.orientation === 'horizontal') { path = line() .y((d) => d[0]) .x((d) => d[1])(finalData); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts index ee5f5e19cd..2eb475d1fa 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts @@ -1,23 +1,26 @@ -import { BoundingRect, DrawableElem, OrientationEnum } from '../../Interfaces.js'; +import { XYChartConfig } from '../../../../../config.type.js'; +import { BoundingRect, DrawableElem } from '../../Interfaces.js'; export class PlotBorder { - constructor(private boundingRect: BoundingRect, private orientation: OrientationEnum) {} + constructor(private boundingRect: BoundingRect, private orientation: XYChartConfig['chartOrientation']) {} getDrawableElement(): DrawableElem[] { - const {x, y, width, height} = this.boundingRect; - if(this.orientation === OrientationEnum.HORIZONTAL) { - return [ - { - groupTexts: ['plot', 'chart-border'], - type: 'path', - data: [ - { - path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${y + height} L ${x},${y}`, - strokeFill: '#000000', - strokeWidth: 1, - }, - ], - }, - ]; + const { x, y, width, height } = this.boundingRect; + if (this.orientation === 'horizontal') { + return [ + { + groupTexts: ['plot', 'chart-border'], + type: 'path', + data: [ + { + path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${ + y + height + } L ${x},${y}`, + strokeFill: '#000000', + strokeWidth: 1, + }, + ], + }, + ]; } return [ { @@ -25,7 +28,9 @@ export class PlotBorder { type: 'path', data: [ { - path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${y + height} L ${x},${y}`, + path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${ + y + height + } L ${x},${y}`, strokeFill: '#000000', strokeWidth: 1, }, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 92b3668f23..16a831fdd0 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -1,11 +1,9 @@ import { - XYChartConfig, XYChartData, Dimension, BoundingRect, DrawableElem, Point, - OrientationEnum, ChartPlotEnum, } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; @@ -13,6 +11,7 @@ import { ChartComponent } from '../../Interfaces.js'; import { LinePlot } from './LinePlot.js'; import { PlotBorder } from './PlotBorder.js'; import { BarPlot } from './BarPlot.js'; +import { XYChartConfig } from '../../../../../config.type.js'; export interface IPlot extends ChartComponent { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 834834f8e1..7d71e78c79 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -1,107 +1,18 @@ // @ts-ignore: TODO Fix ts errors -import { defaultConfig } from '../../../config.js'; +import { XYChartConfig } from '../../../config.type.js'; import { log } from '../../../logger.js'; import { - ChartPlotEnum, - DrawableElem, - OrientationEnum, - XYChartConfig, - XYChartData + DrawableElem, + XYChartData, } from './Interfaces.js'; import { Orchestrator } from './Orchestrator.js'; export class XYChartBuilder { - private config: XYChartConfig; - private chartData: XYChartData; - constructor() { - this.config = { - width: 700, - height: 500, - fontFamily: defaultConfig.fontFamily || 'Sans', - titleFontSize: 16, - titleFill: '#000000', - titlePadding: 5, - showtitle: true, - plotBorderWidth: 2, - yAxis: { - showLabel: true, - labelFontSize: 14, - lablePadding: 5, - labelFill: '#000000', - showTitle: true, - titleFontSize: 16, - titlePadding: 5, - titleFill: '#000000', - showTick: true, - tickLength: 5, - tickWidth: 2, - tickFill: '#000000', - }, - xAxis: { - showLabel: true, - labelFontSize: 14, - lablePadding: 5, - labelFill: '#000000', - showTitle: true, - titleFontSize: 16, - titlePadding: 5, - titleFill: '#000000', - showTick: true, - tickLength: 5, - tickWidth: 2, - tickFill: '#000000', - }, - chartOrientation: OrientationEnum.HORIZONTAL, - plotReservedSpacePercent: 50, - }; - this.chartData = { - yAxis: { - title: 'yAxis1', - min: 0, - max: 100, - }, - xAxis: { - title: 'xAxis', - categories: ['category1', 'category2', 'category3'], - }, - title: 'this is a sample task', - plots: [ - { - type: ChartPlotEnum.BAR, - fill: '#0000bb', - data: [ - ['category1', 23], - ['category2', 56], - ['category3', 34], - ], - }, - { - type: ChartPlotEnum.LINE, - strokeFill: '#bb0000', - strokeWidth: 2, - data: [ - ['category1', 33], - ['category2', 45], - ['category3', 65], - ], - }, - ], - }; - } - - setWidth(width: number) { - this.config.width = width; - } - - setHeight(height: number) { - this.config.height = height; - } - - build(): DrawableElem[] { - log.trace(`Build start with Config: ${JSON.stringify(this.config, null, 2)}`); - log.trace(`Build start with ChartData: ${JSON.stringify(this.chartData, null, 2)}`); - const orchestrator = new Orchestrator(this.config, this.chartData); + 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)}`); + const orchestrator = new Orchestrator(config, chartData); return orchestrator.getDrawableElement(); } } diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 0f211fe878..7c17d1e571 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -20,7 +20,6 @@ %x axis_data %x axis_data_band %x axis_data_band_capture -%x axis_data_band_str %x line %x line_title %x line_data @@ -67,14 +66,10 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} <axis_data>[+-]?\d+(?:\.\d+)?" "*"-->"" "*[+-]?\d+(?:\.\d+)?" "* { return 'AXIS_RANGE_DATA';} -<axis_data>[\[]" "* {this.begin("axis_data_band"); this.begin("axis_data_band_capture")} -<axis_data_band>[,]" "* {this.begin("axis_data_band_capture")} -<axis_data_band_capture>["] {this.begin("axis_data_band_str");} -<axis_data_band_str>[^"]+ {return "AXIS_BAND_DATA";} -<axis_data_band_str>["]" "* {this.popState(); this.popState();} -<axis_data_band_capture>[^\s]+" "* {this.popState(); return "AXIS_BAND_DATA"} +<axis_data>[\[]" "* {this.begin("axis_data_band"), this.begin("axis_data_band_capture")} +<axis_data_band_capture>(["][^",]+["]|[^\s\"\,]]+)" "*([,]" "*(["][^",]+["]|[^\s\]",]+)" "*)* { this.popState(); return "AXIS_BAND_DATA"; } <axis_data_band>[\]]" "* {this.popState(); return "AXIS_BAND_DATA_END"} -<axis_data>[\r\n]+ {this.popState(); this.popState();} +<axis_data>[\s]+ {this.popState(); this.popState();} "line"" "* {this.begin("line"); return 'LINE';} @@ -162,27 +157,27 @@ statement ; parseLine - : LINE LINE_TITLE LINE_DATA {yy.addLineData($2.trim(), $3.split(',').map(d => Number(d.trim())));} + : LINE LINE_TITLE LINE_DATA {yy.setLineData($2.trim(), $3.split(',').map(d => Number(d.trim())));} ; parseBar - : BAR BAR_TITLE BAR_DATA {yy.addBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));} + : BAR BAR_TITLE BAR_DATA {yy.setBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));} ; parseXAxis : AXIS_TITLE statement {yy.setXAxisTitle($1.trim());} - | AXIS_TITLE xAxisBandData {yy.setXAxisTitle($1.trim());} - | AXIS_TITLE AXIS_RANGE_DATA {yy.setXAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setXAxisRangeData(Number($$[0]), Number($$[1]));} + | AXIS_TITLE xAxisBandData statement {yy.setXAxisTitle($1.trim());} + | AXIS_TITLE AXIS_RANGE_DATA statement {yy.setXAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setXAxisRangeData(Number($$[0]), Number($$[1]));} ; xAxisBandData - : AXIS_BAND_DATA xAxisBandData {yy.addXAxisBand($1.trim());} + : AXIS_BAND_DATA xAxisBandData {yy.setXAxisBand($1.split(',').map(d => { let m = d.trim().match(/^(?:["]([^"]+)["]|([^\s"]+))$/); return m ? m[1] || m[2] : "";}));} | AXIS_BAND_DATA_END ; parseYAxis : AXIS_TITLE statement {yy.setYAxisTitle($1.trim());} - | AXIS_TITLE AXIS_RANGE_DATA {yy.setYAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setYAxisRangeData(Number($$[0]), Number($$[1]));} + | AXIS_TITLE AXIS_RANGE_DATA statement {yy.setYAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setYAxisRangeData(Number($$[0]), Number($$[1]));} ; directive diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index a999d9b8d5..41d4f36dbf 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -14,12 +14,11 @@ const mockDB: Record<string, Mock<any, any>> = { setDiagramTitle: vi.fn(), setXAxisTitle: vi.fn(), setXAxisRangeData: vi.fn(), - addXAxisBand: vi.fn(), + setXAxisBand: vi.fn(), setYAxisTitle: vi.fn(), setYAxisRangeData: vi.fn(), - addYAxisBand: vi.fn(), - addLineData: vi.fn(), - addBarData: vi.fn(), + setLineData: vi.fn(), + setBarData: vi.fn(), }; function clearMocks() { @@ -109,12 +108,27 @@ describe('Testing xychart jison file', () => { clearMocks(); - str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2 ] \n'; + str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2 ] \n '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.addXAxisBand).toHaveBeenCalledTimes(2); - expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(1, 'cat2'); - expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(2, 'cat1'); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith(["cat1", "cat2"]); + clearMocks(); + + + 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"]); + 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"]); + clearMocks(); + + str = 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 asdf , cat3] \n '; + expect(parserFnConstructor(str)).toThrow(); }); it('parse y-axis', () => { let str = 'xychart-beta \ny-axis yAxisName\n'; @@ -150,7 +164,7 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle', [23, 45, 56.6]); + expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle', [23, 45, 56.6]); clearMocks(); @@ -159,7 +173,7 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle with space', [23, -45, 56.6]); + expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle with space', [23, -45, 56.6]); clearMocks(); str = @@ -171,7 +185,7 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle', [23, 45, 56.6]); + expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle', [23, 45, 56.6]); clearMocks(); @@ -180,7 +194,7 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle with space', [23, -45, 56.6]); + expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle with space', [23, -45, 56.6]); clearMocks(); str = @@ -193,9 +207,29 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle1', [23, 45, 56.6]); - expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle2', [13, 42, 56.89]); - expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle1', [11, 45.5, 67, 23]); - expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle2', [45, 99, 12]); + 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]); + expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle2', [45, 99, 12]); + clearMocks(); + + str = ` + xychart-beta horizontal + title Basic xychart + x-axis "this is x axis" [category1, "category 2", category3] + y-axis yaxisText 10 --> 150 + bar barTitle1 [23, 45, 56.6] + line lineTitle1 [11, 45.5, 67, 23] + bar barTitle2 [13, 42, 56.89] + line lineTitle2 [45, 99, 012]`; + expect(parserFnConstructor(str)).not.toThrow(); + 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.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]); + expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle2', [45, 99, 12]); }); }); diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index dcf66b1b26..cc002405ec 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -12,9 +12,96 @@ import { clear as commonClear, } from '../../commonDb.js'; import { XYChartBuilder } from './chartBuilder/index.js'; -import { DrawableElem } from './chartBuilder/Interfaces.js'; +import { ChartPlotEnum, DrawableElem, XYChartData, isBandAxisData } from './chartBuilder/Interfaces.js'; +import { XYChartConfig } from '../../config.type.js'; const config = configApi.getConfig(); +let chartWidth = 600; +let chartHeight = 500; + +function getChartDefaultConfig(): XYChartConfig { + return config.xyChart + ? { ...config.xyChart, yAxis: { ...config.xyChart.yAxis }, xAxis: { ...config.xyChart.xAxis } } + : { + width: 700, + height: 500, + fontFamily: config.fontFamily || 'Sans', + titleFontSize: 16, + titleFill: '#000000', + titlePadding: 5, + showtitle: true, + plotBorderWidth: 2, + yAxis: { + showLabel: true, + labelFontSize: 14, + lablePadding: 5, + labelFill: '#000000', + showTitle: true, + titleFontSize: 16, + titlePadding: 5, + titleFill: '#000000', + showTick: true, + tickLength: 5, + tickWidth: 2, + tickFill: '#000000', + }, + xAxis: { + showLabel: true, + labelFontSize: 14, + lablePadding: 5, + labelFill: '#000000', + showTitle: true, + titleFontSize: 16, + titlePadding: 5, + titleFill: '#000000', + showTick: true, + tickLength: 5, + tickWidth: 2, + tickFill: '#000000', + }, + chartOrientation: 'vertical', + plotReservedSpacePercent: 50, + }; +} + +function getChartDefalutData(): XYChartData { + return { + yAxis: { + title: 'yAxis1', + min: 0, + max: 100, + }, + xAxis: { + title: 'xAxis', + categories: [], + }, + title: '', + plots: [ + { + type: ChartPlotEnum.BAR, + fill: '#0000bb', + data: [ + ['category1', 23], + ['category 2', 56], + ['category3', 34], + ], + }, + { + type: ChartPlotEnum.LINE, + strokeFill: '#bb0000', + strokeWidth: 2, + data: [ + ['category1', 33], + ['category 2', 45], + ['category3', 65], + ], + }, + ], + }; +} + +let xyChartConfig: XYChartConfig = getChartDefaultConfig(); +let xyChartData: XYChartData = getChartDefalutData(); function textSanitizer(text: string) { return sanitizeText(text.trim(), config); @@ -23,24 +110,51 @@ function textSanitizer(text: string) { function parseDirective(statement: string, context: string, type: string) { // @ts-ignore: TODO Fix ts errors mermaidAPI.parseDirective(this, statement, context, type); -}; +} -const xyChartBuilder = new XYChartBuilder(); + +function setOrientation(oriantation: string) { + if (oriantation === 'horizontal') { + xyChartConfig.chartOrientation = 'horizontal'; + } else { + xyChartConfig.chartOrientation = 'vertical'; + } +} +function setXAxisTitle(title: string) { + xyChartData.xAxis.title = textSanitizer(title); +} +function setXAxisRangeData(min: number, max: number) { + xyChartData.xAxis = {title: xyChartData.xAxis.title, min, max}; +} +function setXAxisBand(categories: string[]) { + xyChartData.xAxis = {title: xyChartData.xAxis.title, categories: categories.map(c => textSanitizer(c))}; +} +function setYAxisTitle(title: string) { + xyChartData.yAxis.title = textSanitizer(title); +} +function setYAxisRangeData(min: number, max: number) { + xyChartData.yAxis = {title: xyChartData.yAxis.title, min, max}; +} +function setLineData(title: string, data: number[]) {} +function setBarData(title: string, data: number[]) {} function getDrawableElem(): DrawableElem[] { - return xyChartBuilder.build(); + xyChartData.title = getDiagramTitle(); + return XYChartBuilder.build(xyChartConfig, xyChartData); } function setHeight(height: number) { - xyChartBuilder.setHeight(height); + xyChartConfig.height = height; } function setWidth(width: number) { - xyChartBuilder.setWidth(width); + xyChartConfig.width = width; } const clear = function () { commonClear(); + xyChartConfig = getChartDefaultConfig(); + xyChartData = getChartDefalutData(); }; export default { @@ -55,4 +169,12 @@ export default { getDiagramTitle, getAccDescription, setAccDescription, + setOrientation, + setXAxisTitle, + setXAxisRangeData, + setXAxisBand, + setYAxisTitle, + setYAxisRangeData, + setLineData, + setBarData, }; From 597f7a8e8729d20908a3cac446a1e3f9ffd0f3d0 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Mon, 3 Jul 2023 21:44:56 +0530 Subject: [PATCH 011/126] Rendering the chart with all the property from chart config --- demos/xychart.html | 8 ++- .../src/diagrams/xychart/parser/xychart.jison | 20 +++++-- .../xychart/parser/xychart.jison.spec.ts | 17 ++++++ .../mermaid/src/diagrams/xychart/xychartDb.ts | 60 ++++++++++--------- 4 files changed, 69 insertions(+), 36 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index 13d5dfde9a..e737545db3 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -18,8 +18,10 @@ <h1>XY Charts demos</h1> <pre class="mermaid"> xychart-beta horizontal title Basic xychart - x-axis "this is x axis" [category1, "category 2", category3] + x-axis "this is x axis" [category1, "category 2", category3, category4] y-axis yaxisText 10 --> 150 + line [23, 46, 75, 43] + bar "sample bat" [52, 96, 35, 10] </pre> <hr /> @@ -28,8 +30,10 @@ <h1>XY Charts demos</h1> <pre class="mermaid"> xychart-beta title Basic xychart - x-axis "this is x axis" [category1, "category 2", category3] + x-axis "this is x axis" [category1, "category 2", category3, category4] y-axis yaxisText 10 --> 150 + line [23, 46, 75, 43] + bar "sample bat" [52, 96, 35, 10] </pre> <hr /> diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 7c17d1e571..1ecd6edf4f 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -24,6 +24,8 @@ %x line_title %x line_data %x line_data_entries +%x line_data_without_label +%x bar_data_without_label %x bar %x bar_title %x bar_data @@ -77,18 +79,22 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} <line_title>[^"]+ {return 'LINE_TITLE';} <line_title>["]" "* {this.popState(); this.begin("line_data");} <line_data>"["" "* {this.begin('line_data_entries');} -<line_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'LINE_DATA'} +<line_data_without_label,line_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'LINE_DATA'} <line_data_entries>"]"" "* {this.popState(); this.popState(); this.popState()} -<line>[^\s]+" "* {this.begin("line_data"); return 'LINE_TITLE';} +<line_data_without_label>"]"" "* {this.popState(); this.popState()} +<line>[^\s\[]+" "* {this.begin("line_data"); return 'LINE_TITLE';} +<line>"["" "* {this.begin('line_data_without_label');} "bar"" "* {this.begin("bar"); return 'BAR';} <bar>["] {this.begin("bar_title");} <bar_title>[^"]+ {return 'BAR_TITLE';} <bar_title>["]" "* {this.popState(); this.begin("bar_data");} <bar_data>"["" "* {this.begin('bar_data_entries');} -<bar_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'BAR_DATA'} +<bar_data_without_label,bar_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'BAR_DATA'} <bar_data_entries>"]"" "* {this.popState(); this.popState(); this.popState()} -<bar>[^\s]+" "* {this.begin("bar_data"); return 'BAR_TITLE';} +<bar_data_without_label>"]"" "* {this.popState(); this.popState()} +<bar>[^\s\[]+" "* {this.begin("bar_data"); return 'BAR_TITLE';} +<bar>"["" "* {this.begin('bar_data_without_label');} @@ -157,11 +163,13 @@ statement ; parseLine - : LINE LINE_TITLE LINE_DATA {yy.setLineData($2.trim(), $3.split(',').map(d => Number(d.trim())));} + : LINE LINE_DATA {yy.setLineData('', $2.split(',').map(d => Number(d.trim())));} + | LINE LINE_TITLE LINE_DATA {yy.setLineData($2.trim(), $3.split(',').map(d => Number(d.trim())));} ; parseBar - : BAR BAR_TITLE BAR_DATA {yy.setBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));} + : BAR BAR_DATA {yy.setBarData('', $2.split(',').map(d => Number(d.trim())));} + | BAR BAR_TITLE BAR_DATA {yy.setBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));} ; parseXAxis diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 41d4f36dbf..2b96a63f78 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -175,6 +175,14 @@ describe('Testing xychart jison file', () => { expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); 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 ] '; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.setLineData).toHaveBeenCalledWith('', [23, -45, 56.6]); + clearMocks(); str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -4aa5 , 56.6 ] '; @@ -197,6 +205,15 @@ describe('Testing xychart jison file', () => { expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle with space', [23, -45, 56.6]); clearMocks(); + // set bar data without title + 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'); + expect(mockDB.setBarData).toHaveBeenCalledWith('', [23, -45, 56.6]); + clearMocks(); + str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -4aa5 , 56.6 ] '; expect(parserFnConstructor(str)).toThrow(); diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index cc002405ec..19622c4a64 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -12,7 +12,12 @@ import { clear as commonClear, } from '../../commonDb.js'; import { XYChartBuilder } from './chartBuilder/index.js'; -import { ChartPlotEnum, DrawableElem, XYChartData, isBandAxisData } from './chartBuilder/Interfaces.js'; +import { + ChartPlotEnum, + DrawableElem, + XYChartData, + isBandAxisData, +} from './chartBuilder/Interfaces.js'; import { XYChartConfig } from '../../config.type.js'; const config = configApi.getConfig(); @@ -76,27 +81,7 @@ function getChartDefalutData(): XYChartData { categories: [], }, title: '', - plots: [ - { - type: ChartPlotEnum.BAR, - fill: '#0000bb', - data: [ - ['category1', 23], - ['category 2', 56], - ['category3', 34], - ], - }, - { - type: ChartPlotEnum.LINE, - strokeFill: '#bb0000', - strokeWidth: 2, - data: [ - ['category1', 33], - ['category 2', 45], - ['category3', 65], - ], - }, - ], + plots: [], }; } @@ -112,7 +97,6 @@ function parseDirective(statement: string, context: string, type: string) { mermaidAPI.parseDirective(this, statement, context, type); } - function setOrientation(oriantation: string) { if (oriantation === 'horizontal') { xyChartConfig.chartOrientation = 'horizontal'; @@ -124,19 +108,39 @@ function setXAxisTitle(title: string) { xyChartData.xAxis.title = textSanitizer(title); } function setXAxisRangeData(min: number, max: number) { - xyChartData.xAxis = {title: xyChartData.xAxis.title, min, max}; + xyChartData.xAxis = { title: xyChartData.xAxis.title, min, max }; } function setXAxisBand(categories: string[]) { - xyChartData.xAxis = {title: xyChartData.xAxis.title, categories: categories.map(c => textSanitizer(c))}; + xyChartData.xAxis = { + title: xyChartData.xAxis.title, + categories: categories.map((c) => textSanitizer(c)), + }; } function setYAxisTitle(title: string) { xyChartData.yAxis.title = textSanitizer(title); } function setYAxisRangeData(min: number, max: number) { - xyChartData.yAxis = {title: xyChartData.yAxis.title, min, max}; + xyChartData.yAxis = { title: xyChartData.yAxis.title, min, max }; +} +function setLineData(title: string, data: number[]) { + if (isBandAxisData(xyChartData.xAxis)) { + xyChartData.plots.push({ + type: ChartPlotEnum.BAR, + fill: '#0000bb', + data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]), + }); + } +} +function setBarData(title: string, data: number[]) { + if (isBandAxisData(xyChartData.xAxis)) { + xyChartData.plots.push({ + type: ChartPlotEnum.LINE, + strokeFill: '#00ff00', + strokeWidth: 2, + data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]), + }); + } } -function setLineData(title: string, data: number[]) {} -function setBarData(title: string, data: number[]) {} function getDrawableElem(): DrawableElem[] { xyChartData.title = getDiagramTitle(); From 553be985ae474777b747807bb9c1327735259430 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Tue, 4 Jul 2023 10:00:13 +0530 Subject: [PATCH 012/126] Improved space management for text --- .../xychart/chartBuilder/Orchestrator.ts | 4 +- .../chartBuilder/TextDimensionCalculator.ts | 56 ++++++++++++++++++- .../chartBuilder/components/ChartTitle.ts | 18 +++--- .../chartBuilder/components/axis/index.ts | 10 ++-- 4 files changed, 71 insertions(+), 17 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index b7ab4ca140..6998795134 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -17,8 +17,8 @@ export class Orchestrator { this.componentStore = { title: getChartTitleComponent(chartConfig, chartData), plot: getPlotComponent(chartConfig, chartData), - xAxis: getAxis(chartData.xAxis, chartConfig.xAxis), - yAxis: getAxis(chartData.yAxis, chartConfig.yAxis), + xAxis: getAxis(chartData.xAxis, chartConfig.xAxis, chartConfig.fontFamily), + yAxis: getAxis(chartData.yAxis, chartConfig.yAxis, chartConfig.fontFamily), }; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts index c7a252609d..c717163ce2 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts @@ -1,7 +1,7 @@ import { Dimension } from './Interfaces.js'; export interface ITextDimensionCalculator { - getDimension(texts: string[], fontSize: number, fontFamily?: string ): Dimension; + getDimension(texts: string[], fontSize: number, fontFamily?: string): Dimension; } export class TextDimensionCalculator implements ITextDimensionCalculator { @@ -13,3 +13,57 @@ export class TextDimensionCalculator implements ITextDimensionCalculator { }; } } + +export class TextDimensionCalculatorWithFont implements ITextDimensionCalculator { + private container: HTMLSpanElement | null = null; + private hiddenElementId = 'mermaid-text-dimension-calculator'; + constructor(fontFamily?: string) { + if (document) { + let parentContainer = document.getElementById(this.hiddenElementId); + if (!parentContainer) { + parentContainer = document.createElement('div'); + parentContainer.id = this.hiddenElementId; + parentContainer.style.position = 'absolute'; + parentContainer.style.top = '-100px'; + parentContainer.style.left = '0px'; + parentContainer.style.visibility = 'hidden'; + document.body.append(parentContainer); + } + const fontClassName = `font-${fontFamily}`; + const prevContainerAvailable = parentContainer.getElementsByClassName(fontClassName); + if (prevContainerAvailable.length > 0) { + this.container = prevContainerAvailable.item(0) as HTMLSpanElement; + } else { + this.container = document.createElement('div'); + this.container.className = fontClassName; + if (fontFamily) { + this.container.style.fontFamily = fontFamily; + } + parentContainer.append(this.container); + } + } + } + getDimension(texts: string[], fontSize: number): Dimension { + if (!this.container) { + return { + width: texts.reduce((acc, cur) => Math.max(cur.length, acc), 0) * fontSize, + height: fontSize, + }; + } + + const dimension: Dimension = { + width: 0, + height: 0, + }; + + this.container.style.fontSize = `${fontSize}px`; + + for (let t of texts) { + this.container.innerHTML = t; + const bbox = this.container.getBoundingClientRect(); + dimension.width = Math.max(dimension.width, bbox.width); + dimension.height = Math.max(dimension.height, bbox.height); + } + return dimension; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index ae70994717..3cad0dea05 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -1,13 +1,13 @@ -import { ITextDimensionCalculator, TextDimensionCalculator } from '../TextDimensionCalculator.js'; +import { XYChartConfig } from '../../../../config.type.js'; import { - XYChartData, - Dimension, - BoundingRect, - DrawableElem, - Point, + BoundingRect, + ChartComponent, + Dimension, + DrawableElem, + Point, + XYChartData, } from '../Interfaces.js'; -import { ChartComponent } from '../Interfaces.js'; -import { XYChartConfig } from '../../../../config.type.js'; +import { ITextDimensionCalculator, TextDimensionCalculatorWithFont } from '../TextDimensionCalculator.js'; export class ChartTitle implements ChartComponent { private boundingRect: BoundingRect; @@ -75,6 +75,6 @@ export function getChartTitleComponent( chartConfig: XYChartConfig, chartData: XYChartData ): ChartComponent { - const textDimensionCalculator = new TextDimensionCalculator(); + const textDimensionCalculator = new TextDimensionCalculatorWithFont(chartConfig.fontFamily); return new ChartTitle(textDimensionCalculator, chartConfig, chartData); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index 7888ac286b..9953679f01 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,12 +1,12 @@ +import { XYChartAxisConfig } from '../../../../../config.type.js'; import { AxisDataType, + ChartComponent, isBandAxisData, } from '../../Interfaces.js'; -import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; -import { ChartComponent } from '../../Interfaces.js'; +import { TextDimensionCalculatorWithFont } from '../../TextDimensionCalculator.js'; import { BandAxis } from './BandAxis.js'; import { LinearAxis } from './LinearAxis.js'; -import { XYChartAxisConfig } from '../../../../../config.type.js'; export type AxisPosition = 'left' | 'right' | 'top' | 'bottom'; @@ -18,8 +18,8 @@ export interface IAxis extends ChartComponent { setRange(range: [number, number]): void; } -export function getAxis(data: AxisDataType, axisConfig: XYChartAxisConfig): IAxis { - const textDimansionCalculator = new TextDimensionCalculator(); +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); } From 355263a4fbeeafacecc411a8bfd08d2809ded853 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Tue, 4 Jul 2023 19:55:12 +0530 Subject: [PATCH 013/126] Fixed some issue related to rendering and space management --- demos/xychart.html | 15 ++++++++-- .../xychart/chartBuilder/Interfaces.ts | 4 +++ .../xychart/chartBuilder/Orchestrator.ts | 10 +++++-- .../chartBuilder/components/axis/BandAxis.ts | 6 ++-- .../chartBuilder/components/axis/BaseAxis.ts | 29 ++++++++++++------- .../components/axis/LinearAxis.ts | 4 +-- .../chartBuilder/components/axis/index.ts | 3 +- .../chartBuilder/components/plot/BarPlot.ts | 2 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 10 +++---- 9 files changed, 56 insertions(+), 27 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index e737545db3..5803de4b80 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -20,8 +20,8 @@ <h1>XY Charts demos</h1> title Basic xychart x-axis "this is x axis" [category1, "category 2", category3, category4] y-axis yaxisText 10 --> 150 - line [23, 46, 75, 43] bar "sample bat" [52, 96, 35, 10] + line [23, 46, 75, 43] </pre> <hr /> @@ -32,11 +32,22 @@ <h1>XY Charts demos</h1> title Basic xychart x-axis "this is x axis" [category1, "category 2", category3, category4] y-axis yaxisText 10 --> 150 - line [23, 46, 75, 43] bar "sample bat" [52, 96, 35, 10] + line [23, 46, 75, 43] </pre> <hr /> + <h1>XY Charts demos</h1> + <pre class="mermaid"> + xychart-beta horizontal + title Basic xychart + x-axis "this is x axis" [category1, "category 2", category3, category4] + y-axis yaxisText 10 --> 150 + line [23, 46, 75, 43] + </pre> + + <hr /> + <script type="module"> import mermaid from './mermaid.esm.mjs'; mermaid.initialize({ diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index e519d0a016..fbcd87493a 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -26,6 +26,10 @@ export interface BarPlotData { export type PlotData = LinePlotData | BarPlotData; +export function isBarPlot(data: PlotData): data is BarPlotData { + return data.type === ChartPlotEnum.BAR; +} + export interface BandAxisDataType { title: string; categories: string[]; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index 6998795134..db440b07e9 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,5 +1,5 @@ import { log } from '../../../logger.js'; -import { DrawableElem, XYChartData } from './Interfaces.js'; +import { DrawableElem, XYChartData, isBarPlot } from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; import { ChartComponent } from './Interfaces.js'; import { IAxis, getAxis } from './components/axis/index.js'; @@ -13,7 +13,7 @@ export class Orchestrator { xAxis: IAxis; yAxis: IAxis; }; - constructor(private chartConfig: XYChartConfig, chartData: XYChartData) { + constructor(private chartConfig: XYChartConfig, private chartData: XYChartData) { this.componentStore = { title: getChartTitleComponent(chartConfig, chartData), plot: getPlotComponent(chartConfig, chartData), @@ -87,6 +87,9 @@ export class Orchestrator { this.componentStore.xAxis.setBoundingBoxXY({ x: chartX, y: chartY + chartHeight }); this.componentStore.yAxis.setRange([chartY, chartY + chartHeight]); this.componentStore.yAxis.setBoundingBoxXY({ x: 0, y: chartY }); + if(this.chartData.plots.find(p => isBarPlot(p))) { + this.componentStore.xAxis.recalculateOuterPaddingToDrawBar(); + } } private calculateHorizonatalSpace() { @@ -156,6 +159,9 @@ export class Orchestrator { this.componentStore.yAxis.setBoundingBoxXY({ x: chartX, y: titleYEnd }); this.componentStore.xAxis.setRange([chartY, chartY + chartHeight]); this.componentStore.xAxis.setBoundingBoxXY({ x: 0, y: chartY }); + if(this.chartData.plots.find(p => isBarPlot(p))) { + this.componentStore.xAxis.recalculateOuterPaddingToDrawBar(); + } } private calculateSpace() { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts index 75a9ab643d..9a5334097c 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts @@ -1,15 +1,15 @@ import { ScaleBand, scaleBand } from 'd3'; -import { AxisConfig } from '../../Interfaces.js'; +import { XYChartAxisConfig } from '../../../../../config.type.js'; +import { log } from '../../../../../logger.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; -import { log } from '../../../../../logger.js'; export class BandAxis extends BaseAxis { private scale: ScaleBand<string>; private categories: string[]; constructor( - axisConfig: AxisConfig, + axisConfig: XYChartAxisConfig, categories: string[], title: string, textDimensionCalculator: ITextDimensionCalculator diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index 618ac0c9a9..861b6dd8e2 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -1,7 +1,8 @@ -import { Dimension, Point, DrawableElem, BoundingRect, AxisConfig } from '../../Interfaces.js'; -import { AxisPosition, IAxis } from './index.js'; -import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import { XYChartAxisConfig } from '../../../../../config.type.js'; import { log } from '../../../../../logger.js'; +import { BoundingRect, Dimension, DrawableElem, Point } from '../../Interfaces.js'; +import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import { AxisPosition, IAxis } from './index.js'; export abstract class BaseAxis implements IAxis { protected boundingRect: BoundingRect = { x: 0, y: 0, width: 0, height: 0 }; @@ -10,10 +11,10 @@ export abstract class BaseAxis implements IAxis { protected showTitle = false; protected showLabel = false; protected showTick = false; - protected innerPadding = 0; + protected outerPadding = 0; constructor( - protected axisConfig: AxisConfig, + protected axisConfig: XYChartAxisConfig, protected title: string, protected textDimensionCalculator: ITextDimensionCalculator ) { @@ -28,7 +29,7 @@ export abstract class BaseAxis implements IAxis { } getRange(): [number, number] { - return [this.range[0] + this.innerPadding, this.range[1] - this.innerPadding]; + return [this.range[0] + this.outerPadding, this.range[1] - this.outerPadding]; } setAxisPosition(axisPosition: AxisPosition): void { @@ -45,9 +46,8 @@ export abstract class BaseAxis implements IAxis { return Math.abs(this.range[0] - this.range[1]) / this.getTickValues().length; } - getTickInnerPadding(): number { - return this.innerPadding * 2; - // return Math.abs(this.range[0] - this.range[1]) / this.getTickValues().length; + getAxisOuterPadding(): number { + return this.outerPadding; } private getLabelDimension(): Dimension { @@ -57,11 +57,18 @@ 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); + } + this.recalculateScale(); + } + private calculateSpaceIfDrawnHorizontally(availableSpace: Dimension) { let availableHeight = availableSpace.height; if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); - this.innerPadding = spaceRequired.width / 2; + this.outerPadding = spaceRequired.width / 2; const heightRequired = spaceRequired.height + this.axisConfig.lablePadding * 2; log.trace('height required for axis label: ', heightRequired); if (heightRequired <= availableHeight) { @@ -93,7 +100,7 @@ export abstract class BaseAxis implements IAxis { let availableWidth = availableSpace.width; if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); - this.innerPadding = spaceRequired.height / 2; + this.outerPadding = spaceRequired.height / 2; const widthRequired = spaceRequired.width + this.axisConfig.lablePadding * 2; log.trace('width required for axis label: ', widthRequired); if (widthRequired <= availableWidth) { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index 7d46a46b03..39d054bfc7 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -1,6 +1,6 @@ import { ScaleLinear, scaleLinear } from 'd3'; +import { XYChartAxisConfig } from '../../../../../config.type.js'; import { log } from '../../../../../logger.js'; -import { AxisConfig } from '../../Interfaces.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; @@ -9,7 +9,7 @@ export class LinearAxis extends BaseAxis { private domain: [number, number]; constructor( - axisConfig: AxisConfig, + axisConfig: XYChartAxisConfig, domain: [number, number], title: string, textDimensionCalculator: ITextDimensionCalculator diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index 9953679f01..e48a0e8455 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -13,8 +13,9 @@ export type AxisPosition = 'left' | 'right' | 'top' | 'bottom'; export interface IAxis extends ChartComponent { getScaleValue(value: string | number): number; setAxisPosition(axisPosition: AxisPosition): void; - getTickInnerPadding(): number; + getAxisOuterPadding(): number; getTickDistance(): number; + recalculateOuterPaddingToDrawBar(): void; setRange(range: [number, number]): void; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index 5b4a22f4a3..0348ef4b1f 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -24,7 +24,7 @@ export class BarPlot { const barPaddingPercent = 5; const barWidth = - Math.min(this.xAxis.getTickInnerPadding(), this.xAxis.getTickDistance()) * + Math.min(this.xAxis.getAxisOuterPadding() * 2, this.xAxis.getTickDistance()) * (1 - barPaddingPercent / 100); const barWidthHalf = barWidth / 2; diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 19622c4a64..b3f253af3f 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -125,8 +125,9 @@ function setYAxisRangeData(min: number, max: number) { function setLineData(title: string, data: number[]) { if (isBandAxisData(xyChartData.xAxis)) { xyChartData.plots.push({ - type: ChartPlotEnum.BAR, - fill: '#0000bb', + type: ChartPlotEnum.LINE, + strokeFill: '#00ff00', + strokeWidth: 2, data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]), }); } @@ -134,9 +135,8 @@ function setLineData(title: string, data: number[]) { function setBarData(title: string, data: number[]) { if (isBandAxisData(xyChartData.xAxis)) { xyChartData.plots.push({ - type: ChartPlotEnum.LINE, - strokeFill: '#00ff00', - strokeWidth: 2, + type: ChartPlotEnum.BAR, + fill: '#0000bb', data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]), }); } From 89cfa17b074b800f7b6d4018e2629e2b1f70ecb6 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Tue, 4 Jul 2023 20:42:37 +0530 Subject: [PATCH 014/126] Fixed some merge related issue and eslint issue --- .../src/diagram-api/diagram-orchestration.ts | 2 +- .../xychart/chartBuilder/Interfaces.ts | 11 +- .../xychart/chartBuilder/Orchestrator.ts | 4 +- .../chartBuilder/TextDimensionCalculator.ts | 3 +- .../components/axis/LinearAxis.ts | 4 +- .../chartBuilder/components/plot/index.ts | 5 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 8 +- .../src/diagrams/xychart/xychartRenderer.ts | 4 +- pnpm-lock.yaml | 939 ++++++++++++++---- 9 files changed, 751 insertions(+), 229 deletions(-) diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index b4dd2fd958..597474ce87 100644 --- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts +++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts @@ -82,7 +82,7 @@ export const addDiagrams = () => { state, journey, quadrantChart, - sankey + sankey, xychart ); }; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index fbcd87493a..fcf6425088 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -1,8 +1,3 @@ -export enum ChartPlotEnum { - LINE = 'line', - BAR = 'bar', -} - export interface ChartComponent { calculateSpace(availableSpace: Dimension): Dimension; setBoundingBoxXY(point: Point): void; @@ -12,14 +7,14 @@ export interface ChartComponent { export type SimplePlotDataType = [string | number, number][]; export interface LinePlotData { - type: ChartPlotEnum.LINE; + type: 'line'; strokeFill: string, strokeWidth: number, data: SimplePlotDataType; } export interface BarPlotData { - type: ChartPlotEnum.BAR; + type: 'bar' fill: string, data: SimplePlotDataType; } @@ -27,7 +22,7 @@ export interface BarPlotData { export type PlotData = LinePlotData | BarPlotData; export function isBarPlot(data: PlotData): data is BarPlotData { - return data.type === ChartPlotEnum.BAR; + return data.type === 'line'; } export interface BandAxisDataType { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index db440b07e9..5f187267cb 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -87,7 +87,7 @@ export class Orchestrator { this.componentStore.xAxis.setBoundingBoxXY({ x: chartX, y: chartY + chartHeight }); this.componentStore.yAxis.setRange([chartY, chartY + chartHeight]); this.componentStore.yAxis.setBoundingBoxXY({ x: 0, y: chartY }); - if(this.chartData.plots.find(p => isBarPlot(p))) { + if (this.chartData.plots.some((p) => isBarPlot(p))) { this.componentStore.xAxis.recalculateOuterPaddingToDrawBar(); } } @@ -159,7 +159,7 @@ export class Orchestrator { this.componentStore.yAxis.setBoundingBoxXY({ x: chartX, y: titleYEnd }); this.componentStore.xAxis.setRange([chartY, chartY + chartHeight]); this.componentStore.xAxis.setBoundingBoxXY({ x: 0, y: chartY }); - if(this.chartData.plots.find(p => isBarPlot(p))) { + if (this.chartData.plots.some((p) => isBarPlot(p))) { this.componentStore.xAxis.recalculateOuterPaddingToDrawBar(); } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts index c717163ce2..ea77cf4130 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts @@ -5,7 +5,6 @@ export interface ITextDimensionCalculator { } export class TextDimensionCalculator implements ITextDimensionCalculator { - constructor() {} getDimension(texts: string[], fontSize: number): Dimension { return { width: texts.reduce((acc, cur) => Math.max(cur.length, acc), 0) * fontSize, @@ -58,7 +57,7 @@ export class TextDimensionCalculatorWithFont implements ITextDimensionCalculator this.container.style.fontSize = `${fontSize}px`; - for (let t of texts) { + for (const t of texts) { this.container.innerHTML = t; const bbox = this.container.getBoundingClientRect(); dimension.width = Math.max(dimension.width, bbox.width); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index 39d054bfc7..a9b5d3bcb0 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -24,9 +24,9 @@ export class LinearAxis extends BaseAxis { } recalculateScale(): void { - const domain = [...this.domain]; // copy the array so if reverse is called twise it shouldnot cancel the reverse effect + const domain = [...this.domain]; // copy the array so if reverse is called two times it should not cancel the reverse effect if (this.axisPosition === 'left') { - domain.reverse(); // since yaxis in svg start from top + domain.reverse(); // since y-axis in svg start from top } this.scale = scaleLinear().domain(domain).range(this.getRange()); log.trace('Linear axis final domain, range: ', this.domain, this.getRange()); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 16a831fdd0..e9ebd8e922 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -4,7 +4,6 @@ import { BoundingRect, DrawableElem, Point, - ChartPlotEnum, } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; import { ChartComponent } from '../../Interfaces.js'; @@ -60,12 +59,12 @@ export class Plot implements IPlot { ]; for(const plot of this.chartData.plots) { switch(plot.type) { - case ChartPlotEnum.LINE: { + case 'line': { const linePlot = new LinePlot(plot, this.xAxis, this.yAxis, this.chartConfig.chartOrientation); drawableElem.push(...linePlot.getDrawableElement()) } break; - case ChartPlotEnum.BAR: { + case 'bar': { const barPlot = new BarPlot(plot, this.boundingRect, this.xAxis, this.yAxis, this.chartConfig.chartOrientation) drawableElem.push(...barPlot.getDrawableElement()); } diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index b3f253af3f..f4c7044556 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -13,7 +13,6 @@ import { } from '../../commonDb.js'; import { XYChartBuilder } from './chartBuilder/index.js'; import { - ChartPlotEnum, DrawableElem, XYChartData, isBandAxisData, @@ -21,9 +20,6 @@ import { import { XYChartConfig } from '../../config.type.js'; const config = configApi.getConfig(); -let chartWidth = 600; -let chartHeight = 500; - function getChartDefaultConfig(): XYChartConfig { return config.xyChart ? { ...config.xyChart, yAxis: { ...config.xyChart.yAxis }, xAxis: { ...config.xyChart.xAxis } } @@ -125,7 +121,7 @@ function setYAxisRangeData(min: number, max: number) { function setLineData(title: string, data: number[]) { if (isBandAxisData(xyChartData.xAxis)) { xyChartData.plots.push({ - type: ChartPlotEnum.LINE, + type: 'line', strokeFill: '#00ff00', strokeWidth: 2, data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]), @@ -135,7 +131,7 @@ function setLineData(title: string, data: number[]) { function setBarData(title: string, data: number[]) { if (isBandAxisData(xyChartData.xAxis)) { xyChartData.plots.push({ - type: ChartPlotEnum.BAR, + type: 'bar', fill: '#0000bb', data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]), }); diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index dd9b27583a..41d3b3ad52 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -1,4 +1,4 @@ -import { select, Selection } from 'd3'; +import { select } from 'd3'; import { Diagram } from '../../Diagram.js'; import * as configApi from '../../config.js'; import { log } from '../../logger.js'; @@ -59,7 +59,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram function getGroup(gList: string[]) { let elem = group; let prefix = ''; - for (let i = 0; i < gList.length; i++) { + for (const [i, _] of gList.entries()) { let parent = group; if (i > 0 && groups[prefix]) { parent = groups[prefix]; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1cb943a0c8..bd9cf4f298 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,5 @@ lockfileVersion: '6.0' -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false - importers: .: @@ -264,12 +260,9 @@ importers: '@types/d3-sankey': specifier: ^0.12.1 version: 0.12.1 - '@types/d3-scale': - specifier: ^4.0.2 - version: 4.0.2 '@types/d3-selection': - specifier: ^3.0.3 - version: 3.0.3 + specifier: ^3.0.5 + version: 3.0.5 '@types/d3-shape': specifier: ^3.1.0 version: 3.1.0 @@ -513,7 +506,7 @@ importers: version: 1.1.0 unocss: specifier: ^0.51.8 - version: 0.51.8(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.3) + version: 0.51.8(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.3) unplugin-vue-components: specifier: ^0.24.1 version: 0.24.1(rollup@2.79.1)(vue@3.2.47) @@ -617,6 +610,17 @@ packages: - algoliasearch dev: true + /@algolia/autocomplete-preset-algolia@1.7.4(@algolia/client-search@4.14.2)(algoliasearch@4.14.2): + resolution: {integrity: sha512-s37hrvLEIfcmKY8VU9LsAXgm2yfmkdHT3DnA3SgHaY93yjZ2qL57wzb5QweVkYuEBZkT2PIREvRoLXC2sxTbpQ==} + peerDependencies: + '@algolia/client-search': '>= 4.9.1 < 6' + algoliasearch: '>= 4.9.1 < 6' + dependencies: + '@algolia/autocomplete-shared': 1.7.4 + '@algolia/client-search': 4.14.2 + algoliasearch: 4.14.2 + dev: true + /@algolia/autocomplete-preset-algolia@1.8.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2): resolution: {integrity: sha512-J0oTx4me6ZM9kIKPuL3lyU3aB8DEvpVvR6xWmHVROx5rOYJGQcZsdG4ozxwcOyiiu3qxMkIbzntnV1S1VWD8yA==} peerDependencies: @@ -639,6 +643,10 @@ packages: algoliasearch: 4.14.2 dev: true + /@algolia/autocomplete-shared@1.7.4: + resolution: {integrity: sha512-2VGCk7I9tA9Ge73Km99+Qg87w0wzW4tgUruvWAn/gfey1ZXgmxZtyIRBebk35R1O8TbK77wujVtCnpsGpRy1kg==} + dev: true + /@algolia/autocomplete-shared@1.8.2: resolution: {integrity: sha512-b6Z/X4MczChMcfhk6kfRmBzPgjoPzuS9KGR4AFsiLulLNRAAqhP+xZTKtMnZGhLuc61I20d5WqlId02AZvcO6g==} dev: true @@ -763,8 +771,16 @@ packages: find-up: 5.0.0 dev: true - /@antfu/utils@0.7.4: - resolution: {integrity: sha512-qe8Nmh9rYI/HIspLSTwtbMFPj6dISG6+dJnOguTlPNXtCvS2uezdxscVBb7/3DrmNbQK49TDqpkSQ1chbRGdpQ==} + /@antfu/utils@0.5.2: + resolution: {integrity: sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==} + dev: true + + /@antfu/utils@0.7.2: + resolution: {integrity: sha512-vy9fM3pIxZmX07dL+VX1aZe7ynZ+YyB0jY+jE6r3hOK6GNY2t6W8rzpFC4tgpbXUYABkFQwgJq2XYXlxbXAI0g==} + dev: true + + /@antfu/utils@0.7.5: + resolution: {integrity: sha512-dlR6LdS+0SzOAPx/TPRhnoi7hE251OVeT2Snw0RguNbBSbjUHdWr0l3vcUUDg26rEysT89kCbtw1lVorBXLLCg==} dev: true /@apideck/better-ajv-errors@0.3.6(ajv@8.12.0): @@ -981,7 +997,7 @@ packages: engines: {node: '>=12'} dependencies: abab: 2.0.6 - acorn: 8.8.2 + acorn: 8.9.0 acorn-globals: 6.0.0 cssom: 0.5.0 cssstyle: 2.3.0 @@ -994,7 +1010,7 @@ packages: http-proxy-agent: 5.0.0 https-proxy-agent: 5.0.1 is-potential-custom-element-name: 1.0.1 - nwsapi: 2.2.5 + nwsapi: 2.2.6 parse5: 6.0.1 saxes: 5.0.1 symbol-tree: 3.2.4 @@ -1155,7 +1171,7 @@ packages: '@babel/generator': 7.21.1 '@babel/helper-module-transforms': 7.21.2 '@babel/helpers': 7.19.0 - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@babel/template': 7.20.7 '@babel/traverse': 7.21.2 '@babel/types': 7.21.2 @@ -1164,7 +1180,7 @@ packages: gensync: 1.0.0-beta.2 json5: 2.2.1 lodash: 4.17.21 - resolve: 1.22.2 + resolve: 1.22.1 semver: 5.7.1 source-map: 0.5.7 transitivePeerDependencies: @@ -1420,8 +1436,15 @@ packages: js-tokens: 4.0.0 dev: true - /@babel/parser@7.21.8: - resolution: {integrity: sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==} + /@babel/parser@7.21.2: + resolution: {integrity: sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==} + engines: {node: '>=6.0.0'} + hasBin: true + dependencies: + '@babel/types': 7.21.2 + + /@babel/parser@7.22.6: + resolution: {integrity: sha512-EIQu22vNkceq3LbjAq7knDf/UmtI2qbcNI8GRBlijez6TpQLvSodJPYfydQmNA5buwkxxxa/PVI44jjYZ+/cLw==} engines: {node: '>=6.0.0'} hasBin: true dependencies: @@ -2286,7 +2309,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/code-frame': 7.18.6 - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@babel/types': 7.21.2 dev: true @@ -2300,7 +2323,7 @@ packages: '@babel/helper-function-name': 7.21.0 '@babel/helper-hoist-variables': 7.18.6 '@babel/helper-split-export-declaration': 7.18.6 - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@babel/types': 7.21.2 debug: 4.3.4(supports-color@8.1.1) globals: 11.12.0 @@ -2876,18 +2899,30 @@ packages: resolution: {integrity: sha512-6SCwI7P8ao+se1TUsdZ7B4XzL+gqeQZnBc+2EONZlcVa0dVrk0NjETxozFKgMv0eEGH8QzP1fkN+A1rH61l4eg==} dev: true - /@docsearch/css@3.3.5: - resolution: {integrity: sha512-NaXVp3I8LdmJ54fn038KHgG7HmbIzZlKS2FkVf6mKcW5bYMJovkx4947joQyZk5yubxOZ+ddHSh79y39Aevufg==} + /@docsearch/css@3.3.4: + resolution: {integrity: sha512-vDwCDoVXDgopw/hvr0zEADew2wWaGP8Qq0Bxhgii1Ewz2t4fQeyJwIRN/mWADeLFYPVkpz8TpEbxya/i6Tm0WA==} dev: true /@docsearch/css@3.5.1: resolution: {integrity: sha512-2Pu9HDg/uP/IT10rbQ+4OrTQuxIWdKVUEdcw9/w7kZJv9NeHS6skJx1xuRiFyoGKwAzcHXnLp7csE99sj+O1YA==} dev: true - /@docsearch/js@3.3.5(@algolia/client-search@4.14.2): - resolution: {integrity: sha512-nZi074OCryZnzva2LNcbQkwBJIND6cvuFI4s1FIe6Ygf6n9g6B/IYUULXNx05rpoCZ+KEoEt3taROpsHBliuSw==} + /@docsearch/js@3.3.3(@algolia/client-search@4.14.2): + resolution: {integrity: sha512-2xAv2GFuHzzmG0SSZgf8wHX0qZX8n9Y1ZirKUk5Wrdc+vH9CL837x2hZIUdwcPZI9caBA+/CzxsS68O4waYjUQ==} + dependencies: + '@docsearch/react': 3.3.3(@algolia/client-search@4.14.2) + preact: 10.11.0 + transitivePeerDependencies: + - '@algolia/client-search' + - '@types/react' + - react + - react-dom + dev: true + + /@docsearch/js@3.3.4(@algolia/client-search@4.14.2): + resolution: {integrity: sha512-Xd2saBziXJ1UuVpcDz94zAFEFAM6ap993agh0za2e3LDZLhaW993b1f9gyUL4e1CZLsR076tztG2un2gVncvpA==} dependencies: - '@docsearch/react': 3.3.5(@algolia/client-search@4.14.2) + '@docsearch/react': 3.3.4(@algolia/client-search@4.14.2) preact: 10.11.0 transitivePeerDependencies: - '@algolia/client-search' @@ -2909,8 +2944,30 @@ packages: - search-insights dev: true - /@docsearch/react@3.3.5(@algolia/client-search@4.14.2): - resolution: {integrity: sha512-Zuxf4z5PZ9eIQkVCNu76v1H+KAztKItNn3rLzZa7kpBS+++TgNARITnZeUS7C1DKoAhJZFr6T/H+Lvc6h/iiYg==} + /@docsearch/react@3.3.3(@algolia/client-search@4.14.2): + resolution: {integrity: sha512-pLa0cxnl+G0FuIDuYlW+EBK6Rw2jwLw9B1RHIeS4N4s2VhsfJ/wzeCi3CWcs5yVfxLd5ZK50t//TMA5e79YT7Q==} + peerDependencies: + '@types/react': '>= 16.8.0 < 19.0.0' + react: '>= 16.8.0 < 19.0.0' + react-dom: '>= 16.8.0 < 19.0.0' + peerDependenciesMeta: + '@types/react': + optional: true + react: + optional: true + react-dom: + optional: true + dependencies: + '@algolia/autocomplete-core': 1.7.4 + '@algolia/autocomplete-preset-algolia': 1.7.4(@algolia/client-search@4.14.2)(algoliasearch@4.14.2) + '@docsearch/css': 3.3.3 + algoliasearch: 4.14.2 + transitivePeerDependencies: + - '@algolia/client-search' + dev: true + + /@docsearch/react@3.3.4(@algolia/client-search@4.14.2): + resolution: {integrity: sha512-aeOf1WC5zMzBEi2SI6WWznOmIo9rnpN4p7a3zHXxowVciqlI4HsZGtOR9nFOufLeolv7HibwLlaM0oyUqJxasw==} peerDependencies: '@types/react': '>= 16.8.0 < 19.0.0' react: '>= 16.8.0 < 19.0.0' @@ -2925,7 +2982,7 @@ packages: dependencies: '@algolia/autocomplete-core': 1.8.2 '@algolia/autocomplete-preset-algolia': 1.8.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2) - '@docsearch/css': 3.3.5 + '@docsearch/css': 3.3.4 algoliasearch: 4.14.2 transitivePeerDependencies: - '@algolia/client-search' @@ -3648,7 +3705,7 @@ packages: resolution: {integrity: sha512-6MvDI+I6QMvXn5rK9KQGdpEE4mmLTcuQdLZEiX5N+uZB+vc4Yw9K1OtnOgkl8mp4d9X0UrILREyZgF1NUwUt+Q==} dependencies: '@antfu/install-pkg': 0.1.1 - '@antfu/utils': 0.7.4 + '@antfu/utils': 0.7.5 '@iconify/types': 2.0.0 debug: 4.3.4(supports-color@8.1.1) kolorist: 1.7.0 @@ -3800,7 +3857,7 @@ packages: glob: 7.2.3 graceful-fs: 4.2.10 istanbul-lib-coverage: 3.2.0 - istanbul-lib-instrument: 5.2.1 + istanbul-lib-instrument: 5.2.0 istanbul-lib-report: 3.0.0 istanbul-lib-source-maps: 4.0.1 istanbul-reports: 3.1.5 @@ -3810,7 +3867,7 @@ packages: slash: 3.0.0 string-length: 4.0.2 strip-ansi: 6.0.1 - v8-to-istanbul: 9.1.0 + v8-to-istanbul: 9.0.1 transitivePeerDependencies: - supports-color dev: true @@ -4036,6 +4093,20 @@ packages: rollup: 2.79.1 dev: true + /@rollup/plugin-replace@5.0.2(rollup@3.21.0): + resolution: {integrity: sha512-M9YXNekv/C/iHHK+cvORzfRYfPbq0RDD8r0G+bMiTXjNGKulPnCT9O3Ss46WfhI6ZOCgApOP7xAdmCQJ+U2LAA==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + '@rollup/pluginutils': 5.0.2(rollup@3.21.0) + magic-string: 0.27.0 + rollup: 3.21.0 + dev: true + /@rollup/plugin-typescript@11.1.1(typescript@5.1.3): resolution: {integrity: sha512-Ioir+x5Bejv72Lx2Zbz3/qGg7tvGbxQZALCLoJaGrkNXak/19+vKgKYJYM3i/fJxvsb23I9FuFQ8CUBEfsmBRg==} engines: {node: '>=14.0.0'} @@ -4049,7 +4120,7 @@ packages: tslib: optional: true dependencies: - '@rollup/pluginutils': 5.0.2(rollup@2.79.1) + '@rollup/pluginutils': 5.0.2(rollup@3.21.0) resolve: 1.22.2 typescript: 5.1.3 dev: true @@ -4081,6 +4152,21 @@ packages: rollup: 2.79.1 dev: true + /@rollup/pluginutils@5.0.2(rollup@3.21.0): + resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + '@types/estree': 1.0.0 + estree-walker: 2.0.2 + picomatch: 2.3.1 + rollup: 3.21.0 + dev: true + /@sideway/address@4.1.4: resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==} dependencies: @@ -4156,7 +4242,7 @@ packages: /@types/babel__core@7.1.19: resolution: {integrity: sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==} dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@babel/types': 7.21.2 '@types/babel__generator': 7.6.4 '@types/babel__template': 7.4.1 @@ -4172,7 +4258,7 @@ packages: /@types/babel__template@7.4.1: resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==} dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@babel/types': 7.21.2 dev: true @@ -4738,7 +4824,6 @@ packages: /@types/web-bluetooth@0.0.16: resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==} - dev: false /@types/web-bluetooth@0.0.17: resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==} @@ -4937,7 +5022,7 @@ packages: debug: 4.3.4(supports-color@8.1.1) globby: 11.1.0 is-glob: 4.0.3 - semver: 7.5.0 + semver: 7.3.8 tsutils: 3.21.0(typescript@5.0.4) typescript: 5.0.4 transitivePeerDependencies: @@ -4958,7 +5043,7 @@ packages: debug: 4.3.4(supports-color@8.1.1) globby: 11.1.0 is-glob: 4.0.3 - semver: 7.5.0 + semver: 7.3.8 tsutils: 3.21.0(typescript@5.1.3) typescript: 5.1.3 transitivePeerDependencies: @@ -4979,7 +5064,7 @@ packages: '@typescript-eslint/typescript-estree': 5.59.0(typescript@5.0.4) eslint: 8.39.0 eslint-scope: 5.1.1 - semver: 7.5.0 + semver: 7.3.8 transitivePeerDependencies: - supports-color - typescript @@ -4999,7 +5084,7 @@ packages: '@typescript-eslint/typescript-estree': 5.59.0(typescript@5.1.3) eslint: 8.39.0 eslint-scope: 5.1.1 - semver: 7.5.0 + semver: 7.3.8 transitivePeerDependencies: - supports-color - typescript @@ -5013,6 +5098,17 @@ packages: eslint-visitor-keys: 3.4.0 dev: true + /@unocss/astro@0.51.8(rollup@2.79.1)(vite@4.3.3): + resolution: {integrity: sha512-1cY22psmzeW6f29Os7nXhrIgbjR2QI2qPU+PDEMprWiaVHlIc86WUKNzPIcuKskAQMMhWVCIN/XlCNzxZzXJqw==} + dependencies: + '@unocss/core': 0.51.8 + '@unocss/reset': 0.51.8 + '@unocss/vite': 0.51.8(rollup@2.79.1)(vite@4.3.3) + transitivePeerDependencies: + - rollup + - vite + dev: true + /@unocss/astro@0.53.0(rollup@2.79.1)(vite@4.3.3): resolution: {integrity: sha512-8bR7ysIMZEOpcjd/cVmogcABSFDYPjUqMnbflv44p1A2/deemo9CIkpRARoq/96NQuzWJsKhKodcQodExZcqiA==} dependencies: @@ -5024,6 +5120,28 @@ packages: - vite dev: true + /@unocss/cli@0.51.8(rollup@2.79.1): + resolution: {integrity: sha512-vZKct40rIXhp8tIUkBLn9pLq4xWMBi3+wFryBgoZDHSkRwWkuQLqCY5rAsNOv1DG2+tLfKef4guMaFFavDkYzA==} + engines: {node: '>=14'} + hasBin: true + dependencies: + '@ampproject/remapping': 2.2.1 + '@rollup/pluginutils': 5.0.2(rollup@2.79.1) + '@unocss/config': 0.51.8 + '@unocss/core': 0.51.8 + '@unocss/preset-uno': 0.51.8 + cac: 6.7.14 + chokidar: 3.5.3 + colorette: 2.0.19 + consola: 3.1.0 + fast-glob: 3.2.12 + magic-string: 0.30.0 + pathe: 1.1.1 + perfect-debounce: 0.1.3 + transitivePeerDependencies: + - rollup + dev: true + /@unocss/cli@0.53.0(rollup@2.79.1): resolution: {integrity: sha512-9WNBHy8m8tMqwcp7mUhebRUBvHQfbx01CMe5cAFLmUYtJULM+8IjJxqERkaAZyyoOXf1TNO2v1dFAmCwhMRCLQ==} engines: {node: '>=14'} @@ -5046,6 +5164,14 @@ packages: - rollup dev: true + /@unocss/config@0.51.8: + resolution: {integrity: sha512-wiCn2aR82BdDMLfywTxUbyugBy1TxEdfND5BuLZxtNIKARnZoQXm+hfLbIBcOvmcWW1p940I6CImNFrSszOULQ==} + engines: {node: '>=14'} + dependencies: + '@unocss/core': 0.51.8 + unconfig: 0.3.7 + dev: true + /@unocss/config@0.53.0: resolution: {integrity: sha512-D9A3uFT6jSj/EgMOCpQQ+dPadLQDiEIb0BHa7BYW7/3STijnPMcFjPVjzABj9Wn7RQjka/MZ2/AvfH9eYMTR8g==} engines: {node: '>=14'} @@ -5054,16 +5180,33 @@ packages: unconfig: 0.3.9 dev: true + /@unocss/core@0.51.8: + resolution: {integrity: sha512-myHRKBphEN3h0OnsUhg2JaFKjFGfqF/jmmzZCCMNU5UmxbheZomXANNLYXVgEP6LHvd4xAF0DEzrOBcDPLf0HQ==} + dev: true + /@unocss/core@0.53.0: resolution: {integrity: sha512-MB6hqSN2wjmm3NNYspNqzxvMv7LnyLqz0uCWr15elRqnjsuq01w7DZ1iPS9ckA2M3YjQIRTXR9YPtDbSqY0jcA==} dev: true + /@unocss/extractor-arbitrary-variants@0.51.8: + resolution: {integrity: sha512-cCsdRLqmt3adcaRtoIP2pC8mYgH3ed8DEES3E7VOWghqLjwLULUMyBS+vy7n9CvnV75kuTKb1bZ+k9eu/rfh2w==} + dependencies: + '@unocss/core': 0.51.8 + dev: true + /@unocss/extractor-arbitrary-variants@0.53.0: resolution: {integrity: sha512-f1v2E5PherulTAdrsXXb5Knaz4Viu2dM71WalNYhb+j9QqwGngagLrMzRzeIRLOEI2c0D0l7HBQtew+QFWsXcg==} dependencies: '@unocss/core': 0.53.0 dev: true + /@unocss/inspector@0.51.8: + resolution: {integrity: sha512-g3gLl6h/AErv04jCTQOCtfBDzJ01FG2SnDxLErIm22bnKydP/QB15TyX9AXlUsOcxywcCFHYe73OdPqyMqPEFQ==} + dependencies: + gzip-size: 6.0.0 + sirv: 2.0.3 + dev: true + /@unocss/inspector@0.53.0: resolution: {integrity: sha512-TX8O39tXuEStUs516YBiCr2BS68Z9oHXnMZspxBxMma1X47bW2Hz+x9kWkhFzqmHWBjFPJob1PjjkbfeE4TbOQ==} dependencies: @@ -5071,6 +5214,20 @@ packages: sirv: 2.0.3 dev: true + /@unocss/postcss@0.51.8(postcss@8.4.24): + resolution: {integrity: sha512-IWwxGDfd/pqQMBjp1PKplQIeD6uwUs1qxUkJZXIf/BlGE+dMkjIw6Mp72FwYqkMn71hnjU2CMRTbX7RzkKxkmQ==} + engines: {node: '>=14'} + peerDependencies: + postcss: ^8.4.21 + dependencies: + '@unocss/config': 0.51.8 + '@unocss/core': 0.51.8 + css-tree: 2.3.1 + fast-glob: 3.2.12 + magic-string: 0.30.0 + postcss: 8.4.24 + dev: true + /@unocss/postcss@0.53.0(postcss@8.4.24): resolution: {integrity: sha512-q+5aDvkwP1eEhDmdz32WrwsGEEcJdQLy3apiU/df+CaL71HATvUfMZJVZbXZlFqoed703c+cGLHOhRHMPDk/dw==} engines: {node: '>=14'} @@ -5085,12 +5242,28 @@ packages: postcss: 8.4.24 dev: true + /@unocss/preset-attributify@0.51.8: + resolution: {integrity: sha512-2JkGrutvVwvXAC48vCiEpiYLMXlV1rDigR1lwRrKxQC1s/1/j4Wei2RqY0649CkpWZBvdiJ5oPF38NV9pWOnKw==} + dependencies: + '@unocss/core': 0.51.8 + dev: true + /@unocss/preset-attributify@0.53.0: resolution: {integrity: sha512-RqvSbuECeMBVVt2rmNIozznLBkfzkfe7vOIx3arytPBG/nggDnC1GB/xTxCGAiU7UcEXw03laWtjwXHmJHt8Gw==} dependencies: '@unocss/core': 0.53.0 dev: true + /@unocss/preset-icons@0.51.8: + resolution: {integrity: sha512-qvHNsLYVJw6js+1+FNaNZm4qLTM+z4VnHHp1NNMtqHTMEOFUsxu+bAL6CIPkwja455F1GxyvYbHpB6eekSwNEA==} + dependencies: + '@iconify/utils': 2.1.5 + '@unocss/core': 0.51.8 + ofetch: 1.0.1 + transitivePeerDependencies: + - supports-color + dev: true + /@unocss/preset-icons@0.53.0: resolution: {integrity: sha512-0Et3dtrmBRVPZ5pGiITrwb9O01M88s0juOVSM7L4z0Uf0RNXuPCGwh2N5TRX2IIS7LAi4k0tAXFUORlkUiC2Lg==} dependencies: @@ -5101,6 +5274,13 @@ packages: - supports-color dev: true + /@unocss/preset-mini@0.51.8: + resolution: {integrity: sha512-eDm70Kuw3gscq2bjjmM7i11ox2siAbzsI9dIIpJtXntuWdzwlhqNk40YH/YnM02OfWVi8QLdWuye4wOA3//Fjw==} + dependencies: + '@unocss/core': 0.51.8 + '@unocss/extractor-arbitrary-variants': 0.51.8 + dev: true + /@unocss/preset-mini@0.53.0: resolution: {integrity: sha512-hGj9ltZUJIuPT+9bO+R0OlsQOSlV7rjQRkSSMnUaDsuKfzhahsyc7QglNHZI4wuTI/9iSJKGUD4nvTe559+8Hg==} dependencies: @@ -5108,12 +5288,25 @@ packages: '@unocss/extractor-arbitrary-variants': 0.53.0 dev: true + /@unocss/preset-tagify@0.51.8: + resolution: {integrity: sha512-QUUoyDor2AG5N2nQNI+SZ21HEKfJQxDRlZ+mAwT0NLSli5ZGgDN+BwsHGbffNhi2B0Gti/s5ovIDsQY0WyoYbA==} + dependencies: + '@unocss/core': 0.51.8 + dev: true + /@unocss/preset-tagify@0.53.0: resolution: {integrity: sha512-S3e1d2jJvjEbGBE0jPEht/Hmp+245SxjWcrDdO7HmKVL2+0vwIQQg6P2P9aUWqt+/kZQ6iBStSzGm9RyKRKMhw==} dependencies: '@unocss/core': 0.53.0 dev: true + /@unocss/preset-typography@0.51.8: + resolution: {integrity: sha512-cqHzwHj8cybQutPOXg5g81Lww0gWU0DIVNUpLy5g8qW+w5y4rTlQ4pNw5z1x3CyHUHO2++HApN8m07zJL6RA1w==} + dependencies: + '@unocss/core': 0.51.8 + '@unocss/preset-mini': 0.51.8 + dev: true + /@unocss/preset-typography@0.53.0: resolution: {integrity: sha512-VFTNV8O9KIH/JX9Pn43Vv6JrCTljG9NYnuvZpKpEp95uYDcZQAISao04RWEzbAzqB31x8N9Aga1Bq2TSOg3uTA==} dependencies: @@ -5121,6 +5314,14 @@ packages: '@unocss/preset-mini': 0.53.0 dev: true + /@unocss/preset-uno@0.51.8: + resolution: {integrity: sha512-akBkjSDqFhuiLPPOu+t+bhae1/ZRjcKnmMMGekSBoJvE3CfYsDpkYgzlj+U1NhCtmKXHeDZKD8spUJj5Jvea1g==} + dependencies: + '@unocss/core': 0.51.8 + '@unocss/preset-mini': 0.51.8 + '@unocss/preset-wind': 0.51.8 + dev: true + /@unocss/preset-uno@0.53.0: resolution: {integrity: sha512-f50D2nFnX7nXvxtueUfCRbSCrWNJTFm4qKg0J9gzqyOJGWJoNcN2Ig9aL0P47W1TmIjYA5SpGlvg6U5qIfkNtQ==} dependencies: @@ -5129,6 +5330,13 @@ packages: '@unocss/preset-wind': 0.53.0 dev: true + /@unocss/preset-web-fonts@0.51.8: + resolution: {integrity: sha512-s9kKEiV21qYTdrfb3uZRc+Eos1e1/UN6lCC4KPqzD5LfdsZgel5a0xD9RpKUoKOnPgzDkvg22yn8rfsC5NBafg==} + dependencies: + '@unocss/core': 0.51.8 + ofetch: 1.0.1 + dev: true + /@unocss/preset-web-fonts@0.53.0: resolution: {integrity: sha512-CAZW/PSp9+VBvzE/T56v2Yb8Nk3xF9XJaQrDydF9cAPyz/gVOZBbKQSDS8OqyAqKiXbnn+NYCwEqTG8v/YOMyw==} dependencies: @@ -5136,6 +5344,13 @@ packages: ofetch: 1.0.1 dev: true + /@unocss/preset-wind@0.51.8: + resolution: {integrity: sha512-L8zqVQigmPiclCuUdXwzNpj3CcC0PX38m5DAb9fkYyEdeSMkM2BYsKgR56oxah+0crN1dRTjJsqK45MAjJiVKQ==} + dependencies: + '@unocss/core': 0.51.8 + '@unocss/preset-mini': 0.51.8 + dev: true + /@unocss/preset-wind@0.53.0: resolution: {integrity: sha512-vb9tV3Cze+w8OZyOd/Xi6Zn8F8+EV53AZIqCrQvMD/6ZeqQJ9gjFx/Q69H/bu009wnPleQpce6RKJcNqMzif8g==} dependencies: @@ -5143,32 +5358,65 @@ packages: '@unocss/preset-mini': 0.53.0 dev: true + /@unocss/reset@0.51.8: + resolution: {integrity: sha512-mVUP2F/ItPKatkRh5tWBNDZG2YqG7oKxfYxQUYbNAv/hiTKPlKc3PX9T4vZKEvJarbzucTIGbYHdzwqExzG9Kw==} + dev: true + /@unocss/reset@0.53.0: resolution: {integrity: sha512-4XJkEtVxUGYp+WX2aRTrZLNp6MEwulBvhhpkAjwfkS+wVdo9lMma0O93TCqJaFeYx7lU8W92APB4n918rz9scA==} dev: true + /@unocss/scope@0.51.8: + resolution: {integrity: sha512-4B4nlmcwFGKzAyI8ltSSJIivqu+DHZ3/T9IccuoFgWzdr+whPwxO5x6ydkTaJo9bUyT9mcj+HhFEjmwsA98FmQ==} + dev: true + /@unocss/scope@0.53.0: resolution: {integrity: sha512-JAk3jJeFTmmafVI8Oy/TkAs1/NXpR9Vy5IEIMO6gyAmYw0VjiL9dkYDNZAD9hwdj/oRIUgJMcX96Huhy+YDl/w==} dev: true + /@unocss/transformer-attributify-jsx-babel@0.51.8: + resolution: {integrity: sha512-GJ1NLLAn4MH/u5/qsAbnzY7Qyl1aqWi0fj2ggXcv3XP9KmllRmGymWVJB7lqH7AL5xzJD+tivUEH8m+tsaeZYQ==} + dependencies: + '@unocss/core': 0.51.8 + dev: true + /@unocss/transformer-attributify-jsx-babel@0.53.0: resolution: {integrity: sha512-++DTBEkFS2/1VE+TBPEmK0NAaCa/KP7dkJ7uldrQ+c5MpDp/IcCkOt8vPEL/6qKhUbTYXb/hruqq6wv27ZDrSg==} dependencies: '@unocss/core': 0.53.0 dev: true + /@unocss/transformer-attributify-jsx@0.51.8: + resolution: {integrity: sha512-iq4WRj+IHVIRPSH7qaB8PqqlSNSHXkXjPki1n14Bcv1D1ILgDBnH6gRammB/Z7KqAP/k/TCK7bSMeHrQ6iTQoQ==} + dependencies: + '@unocss/core': 0.51.8 + dev: true + /@unocss/transformer-attributify-jsx@0.53.0: resolution: {integrity: sha512-4QJEmoj2of7nZM8afNsMk+NWX3K89j1sHx+EKw5+s1r/Pg4/PxeDgF4PnRWvPnjvRpDaRRTZGRxTrBEimup8vg==} dependencies: '@unocss/core': 0.53.0 dev: true + /@unocss/transformer-compile-class@0.51.8: + resolution: {integrity: sha512-aSyUDjYGUX1qplby0wt9BcBwMsmKzIDyOkp3DBTlAfBjWbxes8ZytjutIzOMos1CrrHTuB/omCT9apG2JAbgDA==} + dependencies: + '@unocss/core': 0.51.8 + dev: true + /@unocss/transformer-compile-class@0.53.0: resolution: {integrity: sha512-PTPysxBAimEWspMU3gMo+053M5RURnLT88Wp0y8f4F8oEMg7fV9Tn5f/bftvG+iI7dPyl4m/OsislxfucoESYw==} dependencies: '@unocss/core': 0.53.0 dev: true + /@unocss/transformer-directives@0.51.8: + resolution: {integrity: sha512-Q1vG0dZYaxbdz0pVnvpuFreGoSqmrk7TgKUHNuJP/XzTi04sriQoDSpC2QMIAuOyU7FyGpSjUORiaBm0/VNURw==} + dependencies: + '@unocss/core': 0.51.8 + css-tree: 2.3.1 + dev: true + /@unocss/transformer-directives@0.53.0: resolution: {integrity: sha512-EIrrVphm0Bv+Ng2w1Qj5f0JFkfbN0b1/1fJ9hwgb5S2ewE3Xvwk59/h321D/GGDraQCUqqyZGgcG368xVh3pQA==} dependencies: @@ -5176,12 +5424,38 @@ packages: css-tree: 2.3.1 dev: true + /@unocss/transformer-variant-group@0.51.8: + resolution: {integrity: sha512-blFQtAntyijFOm+BiiQhroaPwFNX6zYi19wUjY6NdvMAl/g4JzOFTzo+KehQf+lCI3Dvhr8Z2dGtDcnwfqUcDg==} + dependencies: + '@unocss/core': 0.51.8 + dev: true + /@unocss/transformer-variant-group@0.53.0: resolution: {integrity: sha512-dwfjifgoa2VuO3LCl2ayRw3M5T6EfDKt16s9KbIRUcHqMJFnoHACAk8e4YsHGBvly0utbQHxFuBygOar3IfxEg==} dependencies: '@unocss/core': 0.53.0 dev: true + /@unocss/vite@0.51.8(rollup@2.79.1)(vite@4.3.3): + resolution: {integrity: sha512-0mVCgh2Bci2oey6VXGAJBI3x/p5whJiY32BpJaugCmLlZPc6rnWQ8o/FaOTed2EznWAGA8zRRF2l3fEVCURh9g==} + peerDependencies: + vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 + dependencies: + '@ampproject/remapping': 2.2.1 + '@rollup/pluginutils': 5.0.2(rollup@2.79.1) + '@unocss/config': 0.51.8 + '@unocss/core': 0.51.8 + '@unocss/inspector': 0.51.8 + '@unocss/scope': 0.51.8 + '@unocss/transformer-directives': 0.51.8 + chokidar: 3.5.3 + fast-glob: 3.2.12 + magic-string: 0.30.0 + vite: 4.3.3(@types/node@18.16.0) + transitivePeerDependencies: + - rollup + dev: true + /@unocss/vite@0.53.0(rollup@2.79.1)(vite@4.3.3): resolution: {integrity: sha512-JoZhKVNruRjfySMVg/zNJbLEn/NTXj29Wf0SN4++xnGKrSapkPzYC46psL5bm5N5v4SHdpepTCoonC3FWCY6Fw==} peerDependencies: @@ -5202,6 +5476,14 @@ packages: - rollup dev: true + /@vite-pwa/vitepress@0.0.5(vite-plugin-pwa@0.14.7): + resolution: {integrity: sha512-B6xy9wxi9fen+/AnRkY2+XCrbhqh2b/TsVTka6qFQ3zJ8zHSoEUHUucYT3KHMcY5I124G0ZmPKNW+UF9Jx1k4w==} + peerDependencies: + vite-plugin-pwa: ^0.14.0 + dependencies: + vite-plugin-pwa: 0.14.7(vite@4.3.3)(workbox-build@6.5.4)(workbox-window@6.5.4) + dev: true + /@vite-pwa/vitepress@0.2.0(vite-plugin-pwa@0.16.0): resolution: {integrity: sha512-dVQVaP6NB9woCFe4UASUqRp7uwBQJOVXlJlqK4krqXcbb3NuXIXIWOnU7HLpJnHqZj5U/81gKtLN6gs5gJBwiQ==} peerDependencies: @@ -5221,17 +5503,6 @@ packages: vue: 3.2.47 dev: true - /@vitejs/plugin-vue@4.2.3(vite@4.3.8)(vue@3.3.4): - resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==} - engines: {node: ^14.18.0 || >=16.0.0} - peerDependencies: - vite: ^4.0.0 - vue: ^3.2.25 - dependencies: - vite: 4.3.8(@types/node@18.16.0) - vue: 3.3.4 - dev: true - /@vitejs/plugin-vue@4.2.3(vite@4.4.0-beta.3)(vue@3.3.4): resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==} engines: {node: ^14.18.0 || >=16.0.0} @@ -5317,21 +5588,21 @@ packages: pretty-format: 29.5.0 dev: true - /@vue/compat@3.3.4(vue@3.3.4): + /@vue/compat@3.3.4(vue@3.2.47): resolution: {integrity: sha512-VwAsPqUqRJVxeLQPUC03Sa5d+T8UG2Qv4VItq74KmNvtQlRXICpa/sqq12BcyBB4Tz1U5paOEZxWCUoXkrZ9QQ==} peerDependencies: vue: 3.3.4 dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.22.6 estree-walker: 2.0.2 source-map-js: 1.0.2 - vue: 3.3.4 + vue: 3.2.47 dev: false /@vue/compiler-core@3.2.47: resolution: {integrity: sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==} dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@vue/shared': 3.2.47 estree-walker: 2.0.2 source-map: 0.6.1 @@ -5339,10 +5610,11 @@ packages: /@vue/compiler-core@3.3.4: resolution: {integrity: sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==} dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.22.6 '@vue/shared': 3.3.4 estree-walker: 2.0.2 source-map-js: 1.0.2 + dev: true /@vue/compiler-dom@3.2.47: resolution: {integrity: sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==} @@ -5355,11 +5627,12 @@ packages: dependencies: '@vue/compiler-core': 3.3.4 '@vue/shared': 3.3.4 + dev: true /@vue/compiler-sfc@3.2.47: resolution: {integrity: sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==} dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@vue/compiler-core': 3.2.47 '@vue/compiler-dom': 3.2.47 '@vue/compiler-ssr': 3.2.47 @@ -5367,13 +5640,13 @@ packages: '@vue/shared': 3.2.47 estree-walker: 2.0.2 magic-string: 0.25.9 - postcss: 8.4.24 + postcss: 8.4.23 source-map: 0.6.1 /@vue/compiler-sfc@3.3.4: resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==} dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.22.6 '@vue/compiler-core': 3.3.4 '@vue/compiler-dom': 3.3.4 '@vue/compiler-ssr': 3.3.4 @@ -5383,6 +5656,7 @@ packages: magic-string: 0.30.0 postcss: 8.4.24 source-map-js: 1.0.2 + dev: true /@vue/compiler-ssr@3.2.47: resolution: {integrity: sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==} @@ -5395,6 +5669,7 @@ packages: dependencies: '@vue/compiler-dom': 3.3.4 '@vue/shared': 3.3.4 + dev: true /@vue/devtools-api@6.5.0: resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==} @@ -5402,7 +5677,7 @@ packages: /@vue/reactivity-transform@3.2.47: resolution: {integrity: sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==} dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@vue/compiler-core': 3.2.47 '@vue/shared': 3.2.47 estree-walker: 2.0.2 @@ -5411,11 +5686,12 @@ packages: /@vue/reactivity-transform@3.3.4: resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==} dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.22.6 '@vue/compiler-core': 3.3.4 '@vue/shared': 3.3.4 estree-walker: 2.0.2 magic-string: 0.30.0 + dev: true /@vue/reactivity@3.2.47: resolution: {integrity: sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==} @@ -5426,6 +5702,7 @@ packages: resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==} dependencies: '@vue/shared': 3.3.4 + dev: true /@vue/runtime-core@3.2.47: resolution: {integrity: sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==} @@ -5438,6 +5715,7 @@ packages: dependencies: '@vue/reactivity': 3.3.4 '@vue/shared': 3.3.4 + dev: true /@vue/runtime-dom@3.2.47: resolution: {integrity: sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==} @@ -5452,6 +5730,7 @@ packages: '@vue/runtime-core': 3.3.4 '@vue/shared': 3.3.4 csstype: 3.1.2 + dev: true /@vue/server-renderer@3.2.47(vue@3.2.47): resolution: {integrity: sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==} @@ -5470,12 +5749,14 @@ packages: '@vue/compiler-ssr': 3.3.4 '@vue/shared': 3.3.4 vue: 3.3.4 + dev: true /@vue/shared@3.2.47: resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==} /@vue/shared@3.3.4: resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==} + dev: true /@vueuse/core@10.1.0(vue@3.2.47): resolution: {integrity: sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==} @@ -5487,19 +5768,6 @@ packages: transitivePeerDependencies: - '@vue/composition-api' - vue - dev: false - - /@vueuse/core@10.1.2(vue@3.3.4): - resolution: {integrity: sha512-roNn8WuerI56A5uiTyF/TEYX0Y+VKlhZAF94unUfdhbDUI+NfwQMn4FUnUscIRUhv3344qvAghopU4bzLPNFlA==} - dependencies: - '@types/web-bluetooth': 0.0.17 - '@vueuse/metadata': 10.1.2 - '@vueuse/shared': 10.1.2(vue@3.3.4) - vue-demi: 0.14.5(vue@3.3.4) - transitivePeerDependencies: - - '@vue/composition-api' - - vue - dev: true /@vueuse/core@10.2.1(vue@3.3.4): resolution: {integrity: sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==} @@ -5513,7 +5781,7 @@ packages: - vue dev: true - /@vueuse/integrations@10.2.1(focus-trap@7.4.3)(vue@3.3.4): + /@vueuse/integrations@10.2.1(focus-trap@7.5.1)(vue@3.3.4): resolution: {integrity: sha512-FDP5lni+z9FjHE9H3xuvwSjoRV9U8jmDvJpmHPCBjUgPGYRynwb60eHWXCFJXLUtb4gSIHy0e+iaEbrKdalCkQ==} peerDependencies: async-validator: '*' @@ -5556,7 +5824,7 @@ packages: dependencies: '@vueuse/core': 10.2.1(vue@3.3.4) '@vueuse/shared': 10.2.1(vue@3.3.4) - focus-trap: 7.4.3 + focus-trap: 7.5.1 vue-demi: 0.14.5(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' @@ -5565,11 +5833,6 @@ packages: /@vueuse/metadata@10.1.0: resolution: {integrity: sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg==} - dev: false - - /@vueuse/metadata@10.1.2: - resolution: {integrity: sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ==} - dev: true /@vueuse/metadata@10.2.1: resolution: {integrity: sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==} @@ -5582,16 +5845,6 @@ packages: transitivePeerDependencies: - '@vue/composition-api' - vue - dev: false - - /@vueuse/shared@10.1.2(vue@3.3.4): - resolution: {integrity: sha512-1uoUTPBlgyscK9v6ScGeVYDDzlPSFXBlxuK7SfrDGyUTBiznb3mNceqhwvZHjtDRELZEN79V5uWPTF1VDV8svA==} - dependencies: - vue-demi: 0.14.5(vue@3.3.4) - transitivePeerDependencies: - - '@vue/composition-api' - - vue - dev: true /@vueuse/shared@10.2.1(vue@3.3.4): resolution: {integrity: sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==} @@ -5807,7 +6060,7 @@ packages: dependencies: '@types/assert': 1.5.6 '@types/ramda': 0.28.25 - '@vue/compat': 3.3.4(vue@3.3.4) + '@vue/compat': 3.3.4(vue@3.2.47) antlr4: 4.13.0 color-string: 1.9.1 dom-to-image-more: 2.16.0 @@ -5820,8 +6073,8 @@ packages: postcss: 8.4.23 ramda: 0.28.0 tailwindcss: 3.3.2(ts-node@10.9.1) - vue: 3.3.4 - vuex: 4.1.0(vue@3.3.4) + vue: 3.2.47 + vuex: 4.1.0(vue@3.2.47) transitivePeerDependencies: - ts-node dev: false @@ -5920,6 +6173,12 @@ packages: engines: {node: '>=0.4.0'} hasBin: true + /acorn@8.9.0: + resolution: {integrity: sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==} + engines: {node: '>=0.4.0'} + hasBin: true + dev: true + /agent-base@6.0.2: resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==} engines: {node: '>= 6.0.0'} @@ -6289,7 +6548,7 @@ packages: '@babel/helper-plugin-utils': 7.20.2 '@istanbuljs/load-nyc-config': 1.1.0 '@istanbuljs/schema': 0.1.3 - istanbul-lib-instrument: 5.2.1 + istanbul-lib-instrument: 5.2.0 test-exclude: 6.0.0 transitivePeerDependencies: - supports-color @@ -7436,6 +7695,7 @@ packages: /csstype@3.1.2: resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} + dev: true /cuint@0.2.2: resolution: {integrity: sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==} @@ -8628,7 +8888,7 @@ packages: regexp-tree: 0.1.24 regjsparser: 0.10.0 safe-regex: 2.1.1 - semver: 7.5.3 + semver: 7.5.0 strip-indent: 3.0.0 dev: true @@ -9231,10 +9491,10 @@ packages: resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==} dev: true - /focus-trap@7.4.3: - resolution: {integrity: sha512-BgSSbK4GPnS2VbtZ50VtOv1Sti6DIkj3+LkVjiWMNjLeAp1SH1UlLx3ULu/DCu4vq5R4/uvTm+zrvsMsuYmGLg==} + /focus-trap@7.5.1: + resolution: {integrity: sha512-Xm2j/zkKGc9ORKrVrbOqwCiJc5XnQOiBtmpa1YmEW0jqmkJ4ZJnRShuMYnEuho6LO8KKsbrqjir89KQLIDKKqA==} dependencies: - tabbable: 6.1.2 + tabbable: 6.2.0 dev: true /follow-redirects@1.15.2(debug@4.3.4): @@ -10146,7 +10406,7 @@ packages: resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==} hasBin: true dependencies: - ci-info: 3.8.0 + ci-info: 3.6.2 dev: true /is-core-module@2.10.0: @@ -10428,20 +10688,7 @@ packages: engines: {node: '>=8'} dependencies: '@babel/core': 7.12.3 - '@babel/parser': 7.21.8 - '@istanbuljs/schema': 0.1.3 - istanbul-lib-coverage: 3.2.0 - semver: 6.3.0 - transitivePeerDependencies: - - supports-color - dev: true - - /istanbul-lib-instrument@5.2.1: - resolution: {integrity: sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==} - engines: {node: '>=8'} - dependencies: - '@babel/core': 7.12.3 - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.0 semver: 6.3.0 @@ -10599,7 +10846,7 @@ packages: '@types/node': 18.16.0 babel-jest: 29.5.0(@babel/core@7.12.3) chalk: 4.1.2 - ci-info: 3.8.0 + ci-info: 3.6.2 deepmerge: 4.2.2 glob: 7.2.3 graceful-fs: 4.2.10 @@ -10782,7 +11029,7 @@ packages: jest-pnp-resolver: 1.2.2(jest-resolve@29.5.0) jest-util: 29.5.0 jest-validate: 29.5.0 - resolve: 1.22.2 + resolve: 1.22.1 resolve.exports: 2.0.2 slash: 3.0.0 dev: true @@ -10872,7 +11119,7 @@ packages: jest-util: 29.5.0 natural-compare: 1.4.0 pretty-format: 29.5.0 - semver: 7.5.3 + semver: 7.5.0 transitivePeerDependencies: - supports-color dev: true @@ -10884,7 +11131,7 @@ packages: '@jest/types': 29.5.0 '@types/node': 18.16.0 chalk: 4.1.2 - ci-info: 3.8.0 + ci-info: 3.6.2 graceful-fs: 4.2.10 picomatch: 2.3.1 dev: true @@ -11064,7 +11311,7 @@ packages: http-proxy-agent: 5.0.0 https-proxy-agent: 5.0.1 is-potential-custom-element-name: 1.0.1 - nwsapi: 2.2.5 + nwsapi: 2.2.6 parse5: 7.1.2 rrweb-cssom: 0.6.0 saxes: 6.0.0 @@ -11333,7 +11580,7 @@ packages: optional: true dependencies: cli-truncate: 2.1.0 - colorette: 2.0.20 + colorette: 2.0.19 enquirer: 2.3.6 log-update: 4.0.0 p-map: 4.0.0 @@ -11353,7 +11600,7 @@ packages: optional: true dependencies: cli-truncate: 2.1.0 - colorette: 2.0.20 + colorette: 2.0.19 log-update: 4.0.0 p-map: 4.0.0 rfdc: 1.3.0 @@ -11532,11 +11779,19 @@ packages: dependencies: sourcemap-codec: 1.4.8 + /magic-string@0.27.0: + resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==} + engines: {node: '>=12'} + dependencies: + '@jridgewell/sourcemap-codec': 1.4.14 + dev: true + /magic-string@0.30.0: resolution: {integrity: sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==} engines: {node: '>=12'} dependencies: '@jridgewell/sourcemap-codec': 1.4.14 + dev: true /magic-string@0.30.1: resolution: {integrity: sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==} @@ -12127,6 +12382,13 @@ packages: brace-expansion: 2.0.1 dev: true + /minimatch@7.4.6: + resolution: {integrity: sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==} + engines: {node: '>=10'} + dependencies: + brace-expansion: 2.0.1 + dev: true + /minimatch@9.0.0: resolution: {integrity: sha512-0jJj8AvgKqWN05mrwuqi8QYKx1WmYSUoKSxu5Qhs9prezTz10sxAHGNZe9J9cqIJzta8DWsleh2KaVaLl6Ru2w==} engines: {node: '>=16 || 14 >=14.17'} @@ -12134,8 +12396,8 @@ packages: brace-expansion: 2.0.1 dev: true - /minimatch@9.0.1: - resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==} + /minimatch@9.0.2: + resolution: {integrity: sha512-PZOT9g5v2ojiTL7r1xF6plNHLtOeTpSlDI007As2NlA2aYBMfVom17yqa6QzhmDP8QOhn7LjHTg7DFCVSSa6yg==} engines: {node: '>=16 || 14 >=14.17'} dependencies: brace-expansion: 2.0.1 @@ -12184,6 +12446,7 @@ packages: resolution: {integrity: sha512-ua8PAThnTwpprIaU47EPeZ/bPUVp2QYBbWMphUQpVdBI3Lgqzm5KZQ45Agm3YJedHXaIHl6pBGabaLSUPPSptg==} dependencies: acorn: 8.10.0 + acorn: 8.9.0 pathe: 1.1.1 pkg-types: 1.0.3 ufo: 1.1.2 @@ -12345,7 +12608,7 @@ packages: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} dependencies: hosted-git-info: 2.8.9 - resolve: 1.22.2 + resolve: 1.22.1 semver: 5.7.1 validate-npm-package-license: 3.0.4 dev: true @@ -12355,8 +12618,8 @@ packages: engines: {node: '>=10'} dependencies: hosted-git-info: 4.1.0 - is-core-module: 2.12.1 - semver: 7.5.3 + is-core-module: 2.10.0 + semver: 7.5.0 validate-npm-package-license: 3.0.4 dev: true @@ -12390,8 +12653,8 @@ packages: path-key: 4.0.0 dev: true - /nwsapi@2.2.5: - resolution: {integrity: sha512-6xpotnECFy/og7tKSBVmUNft7J3jyXAka4XvG6AUhFWRz+Q/Ljus7znJAA3bxColfQLdS+XsjoodtJfCgeTEFQ==} + /nwsapi@2.2.6: + resolution: {integrity: sha512-vSZ4miHQ4FojLjmz2+ux4B0/XA16jfwt/LBzIUftDpRd8tujHFkXjMyLwjS08fIZCzesj2z7gJukOKJwqebJAQ==} dev: true /nyc@15.1.0: @@ -12803,6 +13066,10 @@ packages: resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==} dev: true + /perfect-debounce@0.1.3: + resolution: {integrity: sha512-NOT9AcKiDGpnV/HBhI22Str++XWcErO/bALvHCuhv33owZW/CjH8KAFLZDCmu3727sihe0wTxpDhyGc6M8qacQ==} + dev: true + /perfect-debounce@1.0.0: resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==} dev: true @@ -12838,7 +13105,7 @@ packages: /pino-abstract-transport@1.0.0: resolution: {integrity: sha512-c7vo5OpW4wIS42hUVcT5REsL8ZljsUfBjqV/e2sFxmFEFZiq1XLUp5EYLtuDH6PEHq9W1egWqRbnLUP5FuZmOA==} dependencies: - readable-stream: 4.4.0 + readable-stream: 4.4.2 split2: 4.2.0 dev: false @@ -12846,8 +13113,8 @@ packages: resolution: {integrity: sha512-EqX4pwDPrt3MuOAAUBMU0Tk5kR/YcCM5fNPEzgCO2zJ5HfX0vbiH9HbJglnyeQsN96Kznae6MWD47pZB5avTrg==} dev: true - /pino-std-serializers@6.2.1: - resolution: {integrity: sha512-wHuWB+CvSVb2XqXM0W/WOYUkVSPbiJb9S5fNB7TBhd8s892Xq910bRxwHtC4l71hgztObTjXL6ZheZXFjhDrDQ==} + /pino-std-serializers@6.2.2: + resolution: {integrity: sha512-cHjPPsE+vhj/tnhCy/wiMh3M3z3h/j15zHQX+S9GkTBgqJuTuJzYJ4gUyACLhDaJ7kk9ba9iRDmbH2tJU03OiA==} dev: false /pino@6.14.0: @@ -12871,7 +13138,7 @@ packages: fast-redact: 3.1.2 on-exit-leak-free: 2.1.0 pino-abstract-transport: 1.0.0 - pino-std-serializers: 6.2.1 + pino-std-serializers: 6.2.2 process-warning: 2.2.0 quick-format-unescaped: 4.0.4 real-require: 0.2.0 @@ -12959,23 +13226,23 @@ packages: peerDependencies: postcss: ^8.0.0 dependencies: - postcss: 8.4.24 + postcss: 8.4.23 postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.2 dev: false - /postcss-js@4.0.1(postcss@8.4.24): + /postcss-js@4.0.1(postcss@8.4.23): resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16} peerDependencies: postcss: ^8.4.21 dependencies: camelcase-css: 2.0.1 - postcss: 8.4.24 + postcss: 8.4.23 dev: false - /postcss-load-config@4.0.1(postcss@8.4.24)(ts-node@10.9.1): + /postcss-load-config@4.0.1(postcss@8.4.23)(ts-node@10.9.1): resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==} engines: {node: '>= 14'} peerDependencies: @@ -12988,18 +13255,18 @@ packages: optional: true dependencies: lilconfig: 2.1.0 - postcss: 8.4.24 + postcss: 8.4.23 ts-node: 10.9.1(@types/node@18.16.0)(typescript@5.1.3) yaml: 2.2.2 dev: false - /postcss-nested@6.0.1(postcss@8.4.24): + /postcss-nested@6.0.1(postcss@8.4.23): resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} engines: {node: '>=12.0'} peerDependencies: postcss: ^8.2.14 dependencies: - postcss: 8.4.24 + postcss: 8.4.23 postcss-selector-parser: 6.0.13 dev: false @@ -13030,6 +13297,7 @@ packages: nanoid: 3.3.6 picocolors: 1.0.0 source-map-js: 1.0.2 + dev: true /preact@10.11.0: resolution: {integrity: sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==} @@ -13147,6 +13415,11 @@ packages: once: 1.4.0 dev: true + /punycode@2.1.1: + resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==} + engines: {node: '>=6'} + dev: true + /punycode@2.3.0: resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==} engines: {node: '>=6'} @@ -13287,14 +13560,15 @@ packages: util-deprecate: 1.0.2 dev: true - /readable-stream@4.4.0: - resolution: {integrity: sha512-kDMOq0qLtxV9f/SQv522h8cxZBqNZXuXNyjyezmfAAuribMyVXziljpQ/uQhfE1XLg2/TLTW2DsnoE4VAi/krg==} + /readable-stream@4.4.2: + resolution: {integrity: sha512-Lk/fICSyIhodxy1IDK2HazkeGjSmezAWX2egdtJnYhtzKEsBPJowlI6F6LPb5tqIQILrMbx22S5o3GuJavPusA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: abort-controller: 3.0.0 buffer: 6.0.3 events: 3.3.0 process: 0.11.10 + string_decoder: 1.3.0 dev: false /readdirp@3.6.0: @@ -13312,7 +13586,7 @@ packages: resolution: {integrity: sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==} engines: {node: '>= 0.10'} dependencies: - resolve: 1.22.2 + resolve: 1.22.1 dev: true /redent@3.0.0: @@ -13513,7 +13787,7 @@ packages: /resolve@1.19.0: resolution: {integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==} dependencies: - is-core-module: 2.12.1 + is-core-module: 2.10.0 path-parse: 1.0.7 dev: true @@ -13676,7 +13950,6 @@ packages: /safe-buffer@5.2.1: resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==} - dev: true /safe-regex-test@1.0.0: resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==} @@ -13925,6 +14198,15 @@ packages: vscode-textmate: 8.0.0 dev: true + /shiki@0.14.2: + resolution: {integrity: sha512-ltSZlSLOuSY0M0Y75KA+ieRaZ0Trf5Wl3gutE7jzLuIcWxLp5i/uEnLoQWNvgKXQ5OMpGkJnVMRLAuzjc0LJ2A==} + dependencies: + ansi-sequence-parser: 1.1.0 + jsonc-parser: 3.2.0 + vscode-oniguruma: 1.7.0 + vscode-textmate: 8.0.0 + dev: true + /shiki@0.14.3: resolution: {integrity: sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==} dependencies: @@ -14311,7 +14593,6 @@ packages: resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==} dependencies: safe-buffer: 5.2.1 - dev: true /stringify-object@3.3.0: resolution: {integrity: sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==} @@ -14452,8 +14733,8 @@ packages: tslib: 2.5.0 dev: true - /tabbable@6.1.2: - resolution: {integrity: sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ==} + /tabbable@6.2.0: + resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} dev: true /tailwindcss@3.3.2(ts-node@10.9.1): @@ -14475,11 +14756,11 @@ packages: normalize-path: 3.0.0 object-hash: 3.0.0 picocolors: 1.0.0 - postcss: 8.4.24 - postcss-import: 15.1.0(postcss@8.4.24) - postcss-js: 4.0.1(postcss@8.4.24) - postcss-load-config: 4.0.1(postcss@8.4.24)(ts-node@10.9.1) - postcss-nested: 6.0.1(postcss@8.4.24) + postcss: 8.4.23 + postcss-import: 15.1.0(postcss@8.4.23) + postcss-js: 4.0.1(postcss@8.4.23) + postcss-load-config: 4.0.1(postcss@8.4.23)(ts-node@10.9.1) + postcss-nested: 6.0.1(postcss@8.4.23) postcss-selector-parser: 6.0.13 postcss-value-parser: 4.2.0 resolve: 1.22.2 @@ -14694,7 +14975,7 @@ packages: engines: {node: '>=0.8'} dependencies: psl: 1.9.0 - punycode: 2.3.0 + punycode: 2.1.1 dev: true /tough-cookie@4.1.2: @@ -15001,10 +15282,18 @@ packages: which-boxed-primitive: 1.0.2 dev: true + /unconfig@0.3.7: + resolution: {integrity: sha512-1589b7oGa8ILBYpta7TndM5mLHLzHUqBfhszeZxuUBrjO/RoQ52VGVWsS3w0C0GLNxO9RPmqkf6BmIvBApaRdA==} + dependencies: + '@antfu/utils': 0.5.2 + defu: 6.1.2 + jiti: 1.18.2 + dev: true + /unconfig@0.3.9: resolution: {integrity: sha512-8yhetFd48M641mxrkWA+C/lZU4N0rCOdlo3dFsyFPnBHBjMJfjT/3eAZBRT2RxCRqeBMAKBVgikejdS6yeBjMw==} dependencies: - '@antfu/utils': 0.7.4 + '@antfu/utils': 0.7.5 defu: 6.1.2 jiti: 1.18.2 dev: true @@ -15110,6 +15399,42 @@ packages: engines: {node: '>= 10.0.0'} dev: true + /unocss@0.51.8(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.3): + resolution: {integrity: sha512-uty78ilhQ/HxvjIDLRZ0J6Kb6fSfTKv0afyP7iWQmqoG/qTBR33ambnuTmi2Dt5GzCxAY6tyCaWjK/FZ7mfEYg==} + engines: {node: '>=14'} + peerDependencies: + '@unocss/webpack': 0.51.8 + peerDependenciesMeta: + '@unocss/webpack': + optional: true + dependencies: + '@unocss/astro': 0.51.8(rollup@2.79.1)(vite@4.3.3) + '@unocss/cli': 0.51.8(rollup@2.79.1) + '@unocss/core': 0.51.8 + '@unocss/extractor-arbitrary-variants': 0.51.8 + '@unocss/postcss': 0.51.8(postcss@8.4.24) + '@unocss/preset-attributify': 0.51.8 + '@unocss/preset-icons': 0.51.8 + '@unocss/preset-mini': 0.51.8 + '@unocss/preset-tagify': 0.51.8 + '@unocss/preset-typography': 0.51.8 + '@unocss/preset-uno': 0.51.8 + '@unocss/preset-web-fonts': 0.51.8 + '@unocss/preset-wind': 0.51.8 + '@unocss/reset': 0.51.8 + '@unocss/transformer-attributify-jsx': 0.51.8 + '@unocss/transformer-attributify-jsx-babel': 0.51.8 + '@unocss/transformer-compile-class': 0.51.8 + '@unocss/transformer-directives': 0.51.8 + '@unocss/transformer-variant-group': 0.51.8 + '@unocss/vite': 0.51.8(rollup@2.79.1)(vite@4.3.3) + transitivePeerDependencies: + - postcss + - rollup + - supports-color + - vite + dev: true + /unocss@0.53.0(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.3): resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==} engines: {node: '>=14'} @@ -15151,6 +15476,35 @@ packages: engines: {node: '>= 0.8'} dev: true + /unplugin-vue-components@0.24.1(rollup@2.79.1)(vue@3.2.47): + resolution: {integrity: sha512-T3A8HkZoIE1Cja95xNqolwza0yD5IVlgZZ1PVAGvVCx8xthmjsv38xWRCtHtwl+rvZyL9uif42SRkDGw9aCfMA==} + engines: {node: '>=14'} + peerDependencies: + '@babel/parser': ^7.15.8 + '@nuxt/kit': ^3.2.2 + vue: 2 || 3 + peerDependenciesMeta: + '@babel/parser': + optional: true + '@nuxt/kit': + optional: true + dependencies: + '@antfu/utils': 0.7.2 + '@rollup/pluginutils': 5.0.2(rollup@2.79.1) + chokidar: 3.5.3 + debug: 4.3.4(supports-color@8.1.1) + fast-glob: 3.2.12 + local-pkg: 0.4.3 + magic-string: 0.30.0 + minimatch: 7.4.6 + resolve: 1.22.1 + unplugin: 1.1.0 + vue: 3.2.47 + transitivePeerDependencies: + - rollup + - supports-color + dev: true + /unplugin-vue-components@0.25.0(rollup@2.79.1)(vue@3.2.47): resolution: {integrity: sha512-HxrQ4GMSS1RwVww2av3a42cABo/v5AmTRN9iARv6e/xwkrfTyHhLh84kFwXxKkXK61vxDHxaryn694mQmkiVBg==} engines: {node: '>=14'} @@ -15164,24 +15518,24 @@ packages: '@nuxt/kit': optional: true dependencies: - '@antfu/utils': 0.7.4 + '@antfu/utils': 0.7.5 '@rollup/pluginutils': 5.0.2(rollup@2.79.1) chokidar: 3.5.3 debug: 4.3.4(supports-color@8.1.1) fast-glob: 3.2.12 local-pkg: 0.4.3 magic-string: 0.30.0 - minimatch: 9.0.1 + minimatch: 9.0.2 resolve: 1.22.2 - unplugin: 1.3.1 + unplugin: 1.3.2 vue: 3.2.47 transitivePeerDependencies: - rollup - supports-color dev: true - /unplugin@1.3.1: - resolution: {integrity: sha512-h4uUTIvFBQRxUKS2Wjys6ivoeofGhxzTe2sRWlooyjHXVttcVfV/JiavNd3d4+jty0SVV0dxGw9AkY9MwiaCEw==} + /unplugin@1.1.0: + resolution: {integrity: sha512-I8obQ8Rs/hnkxokRV6g8JKOQFgYNnTd9DL58vcSt5IJ9AkK8wbrtsnzD5hi4BJlvcY536JzfEXj9L6h7j559/A==} dependencies: acorn: 8.8.2 chokidar: 3.5.3 @@ -15189,6 +15543,15 @@ packages: webpack-virtual-modules: 0.5.0 dev: true + /unplugin@1.3.2: + resolution: {integrity: sha512-Lh7/2SryjXe/IyWqx9K7IKwuKhuOFZEhotiBquOODsv2IVyDkI9lv/XhgfjdXf/xdbv32txmnBNnC/JVTDJlsA==} + dependencies: + acorn: 8.9.0 + chokidar: 3.5.3 + webpack-sources: 3.2.3 + webpack-virtual-modules: 0.5.0 + dev: true + /untildify@4.0.0: resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==} engines: {node: '>=8'} @@ -15224,7 +15587,7 @@ packages: /uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} dependencies: - punycode: 2.3.0 + punycode: 2.1.1 dev: true /url-parse@1.5.10: @@ -15265,6 +15628,15 @@ packages: /v8-compile-cache-lib@3.0.1: resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==} + /v8-to-istanbul@9.0.1: + resolution: {integrity: sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==} + engines: {node: '>=10.12.0'} + dependencies: + '@jridgewell/trace-mapping': 0.3.17 + '@types/istanbul-lib-coverage': 2.0.4 + convert-source-map: 1.8.0 + dev: true + /v8-to-istanbul@9.1.0: resolution: {integrity: sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==} engines: {node: '>=10.12.0'} @@ -15346,6 +15718,25 @@ packages: - supports-color dev: true + /vite-plugin-pwa@0.14.7(vite@4.3.3)(workbox-build@6.5.4)(workbox-window@6.5.4): + resolution: {integrity: sha512-dNJaf0fYOWncmjxv9HiSa2xrSjipjff7IkYE5oIUJ2x5HKu3cXgA8LRgzOwTc5MhwyFYRSU0xyN0Phbx3NsQYw==} + peerDependencies: + vite: ^3.1.0 || ^4.0.0 + workbox-build: ^6.5.4 + workbox-window: ^6.5.4 + dependencies: + '@rollup/plugin-replace': 5.0.2(rollup@3.21.0) + debug: 4.3.4(supports-color@8.1.1) + fast-glob: 3.2.12 + pretty-bytes: 6.1.0 + rollup: 3.21.0 + vite: 4.3.3(@types/node@18.16.0) + workbox-build: 6.5.4 + workbox-window: 6.5.4 + transitivePeerDependencies: + - supports-color + dev: true + /vite-plugin-pwa@0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0): resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==} engines: {node: '>=16.0.0'} @@ -15397,39 +15788,6 @@ packages: fsevents: 2.3.2 dev: true - /vite@4.3.8(@types/node@18.16.0): - resolution: {integrity: sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==} - engines: {node: ^14.18.0 || >=16.0.0} - hasBin: true - peerDependencies: - '@types/node': '>= 14' - less: '*' - sass: '*' - stylus: '*' - sugarss: '*' - terser: ^5.4.0 - peerDependenciesMeta: - '@types/node': - optional: true - less: - optional: true - sass: - optional: true - stylus: - optional: true - sugarss: - optional: true - terser: - optional: true - dependencies: - '@types/node': 18.16.0 - esbuild: 0.17.18 - postcss: 8.4.24 - rollup: 3.26.0 - optionalDependencies: - fsevents: 2.3.2 - dev: true - /vite@4.3.9(@types/node@18.16.0): resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==} engines: {node: ^14.18.0 || >=16.0.0} @@ -15521,16 +15879,45 @@ packages: hasBin: true dependencies: '@docsearch/css': 3.3.3 - '@docsearch/js': 3.3.5(@algolia/client-search@4.14.2) - '@vitejs/plugin-vue': 4.2.3(vite@4.3.8)(vue@3.3.4) + '@docsearch/js': 3.3.3(@algolia/client-search@4.14.2) + '@vitejs/plugin-vue': 4.2.1(vite@4.3.3)(vue@3.2.47) '@vue/devtools-api': 6.5.0 - '@vueuse/core': 10.1.2(vue@3.3.4) + '@vueuse/core': 10.1.0(vue@3.2.47) body-scroll-lock: 4.0.0-beta.0 mark.js: 8.11.1 minisearch: 6.0.1 shiki: 0.14.1 - vite: 4.3.8(@types/node@18.16.0) - vue: 3.3.4 + vite: 4.3.3(@types/node@18.16.0) + vue: 3.2.47 + transitivePeerDependencies: + - '@algolia/client-search' + - '@types/node' + - '@types/react' + - '@vue/composition-api' + - less + - react + - react-dom + - sass + - stylus + - sugarss + - terser + dev: true + + /vitepress@1.0.0-alpha.75(@algolia/client-search@4.14.2)(@types/node@18.16.0): + resolution: {integrity: sha512-twpPZ/6UnDR8X0Nmj767KwKhXlTQQM9V/J1i2BP9ryO29/w4hpxBfEum6nvfpNhJ4H3h+cIhwzAK/e9crZ6HEQ==} + hasBin: true + dependencies: + '@docsearch/css': 3.3.4 + '@docsearch/js': 3.3.4(@algolia/client-search@4.14.2) + '@vitejs/plugin-vue': 4.2.1(vite@4.3.3)(vue@3.2.47) + '@vue/devtools-api': 6.5.0 + '@vueuse/core': 10.1.0(vue@3.2.47) + body-scroll-lock: 4.0.0-beta.0 + mark.js: 8.11.1 + minisearch: 6.0.1 + shiki: 0.14.2 + vite: 4.3.3(@types/node@18.16.0) + vue: 3.2.47 transitivePeerDependencies: - '@algolia/client-search' - '@types/node' @@ -15554,9 +15941,9 @@ packages: '@vitejs/plugin-vue': 4.2.3(vite@4.4.0-beta.3)(vue@3.3.4) '@vue/devtools-api': 6.5.0 '@vueuse/core': 10.2.1(vue@3.3.4) - '@vueuse/integrations': 10.2.1(focus-trap@7.4.3)(vue@3.3.4) + '@vueuse/integrations': 10.2.1(focus-trap@7.5.1)(vue@3.3.4) body-scroll-lock: 4.0.0-beta.0 - focus-trap: 7.4.3 + focus-trap: 7.5.1 mark.js: 8.11.1 minisearch: 6.1.0 shiki: 0.14.3 @@ -15710,7 +16097,6 @@ packages: optional: true dependencies: vue: 3.2.47 - dev: false /vue-demi@0.14.5(vue@3.3.4): resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==} @@ -15744,14 +16130,15 @@ packages: '@vue/runtime-dom': 3.3.4 '@vue/server-renderer': 3.3.4(vue@3.3.4) '@vue/shared': 3.3.4 + dev: true - /vuex@4.1.0(vue@3.3.4): + /vuex@4.1.0(vue@3.2.47): resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==} peerDependencies: vue: ^3.2.0 dependencies: '@vue/devtools-api': 6.5.0 - vue: 3.3.4 + vue: 3.2.47 dev: false /w3c-hr-time@1.0.2: @@ -15890,7 +16277,7 @@ packages: peerDependencies: webpack: ^4.0.0 || ^5.0.0 dependencies: - colorette: 2.0.20 + colorette: 2.0.19 memfs: 3.4.11 mime-types: 2.1.35 range-parser: 1.2.1 @@ -16140,6 +16527,13 @@ packages: resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==} dev: true + /workbox-background-sync@6.5.4: + resolution: {integrity: sha512-0r4INQZMyPky/lj4Ou98qxcThrETucOde+7mRGJl13MPJugQNKeZQOdIJe/1AchOP23cTqHcN/YVpD6r8E6I8g==} + dependencies: + idb: 7.1.1 + workbox-core: 6.5.4 + dev: true + /workbox-background-sync@7.0.0: resolution: {integrity: sha512-S+m1+84gjdueM+jIKZ+I0Lx0BDHkk5Nu6a3kTVxP4fdj3gKouRNmhO8H290ybnJTOPfBDtTMXSQA/QLTvr7PeA==} dependencies: @@ -16147,12 +16541,64 @@ packages: workbox-core: 7.0.0 dev: true + /workbox-broadcast-update@6.5.4: + resolution: {integrity: sha512-I/lBERoH1u3zyBosnpPEtcAVe5lwykx9Yg1k6f8/BGEPGaMMgZrwVrqL1uA9QZ1NGGFoyE6t9i7lBjOlDhFEEw==} + dependencies: + workbox-core: 6.5.4 + dev: true + /workbox-broadcast-update@7.0.0: resolution: {integrity: sha512-oUuh4jzZrLySOo0tC0WoKiSg90bVAcnE98uW7F8GFiSOXnhogfNDGZelPJa+6KpGBO5+Qelv04Hqx2UD+BJqNQ==} dependencies: workbox-core: 7.0.0 dev: true + /workbox-build@6.5.4: + resolution: {integrity: sha512-kgRevLXEYvUW9WS4XoziYqZ8Q9j/2ziJYEtTrjdz5/L/cTUa2XfyMP2i7c3p34lgqJ03+mTiz13SdFef2POwbA==} + engines: {node: '>=10.0.0'} + dependencies: + '@apideck/better-ajv-errors': 0.3.6(ajv@8.11.0) + '@babel/core': 7.12.3 + '@babel/preset-env': 7.20.2(@babel/core@7.12.3) + '@babel/runtime': 7.21.0 + '@rollup/plugin-babel': 5.3.1(@babel/core@7.12.3)(rollup@2.79.1) + '@rollup/plugin-node-resolve': 11.2.1(rollup@2.79.1) + '@rollup/plugin-replace': 2.4.2(rollup@2.79.1) + '@surma/rollup-plugin-off-main-thread': 2.2.3 + ajv: 8.11.0 + common-tags: 1.8.2 + fast-json-stable-stringify: 2.1.0 + fs-extra: 9.1.0 + glob: 7.2.3 + lodash: 4.17.21 + pretty-bytes: 5.6.0 + rollup: 2.79.1 + rollup-plugin-terser: 7.0.2(rollup@2.79.1) + source-map: 0.8.0-beta.0 + stringify-object: 3.3.0 + strip-comments: 2.0.1 + tempy: 0.6.0 + upath: 1.2.0 + workbox-background-sync: 6.5.4 + workbox-broadcast-update: 6.5.4 + workbox-cacheable-response: 6.5.4 + workbox-core: 6.5.4 + workbox-expiration: 6.5.4 + workbox-google-analytics: 6.5.4 + workbox-navigation-preload: 6.5.4 + workbox-precaching: 6.5.4 + workbox-range-requests: 6.5.4 + workbox-recipes: 6.5.4 + workbox-routing: 6.5.4 + workbox-strategies: 6.5.4 + workbox-streams: 6.5.4 + workbox-sw: 6.5.4 + workbox-window: 6.5.4 + transitivePeerDependencies: + - '@types/babel__core' + - supports-color + dev: true + /workbox-build@7.0.0: resolution: {integrity: sha512-CttE7WCYW9sZC+nUYhQg3WzzGPr4IHmrPnjKiu3AMXsiNQKx+l4hHl63WTrnicLmKEKHScWDH8xsGBdrYgtBzg==} engines: {node: '>=16.0.0'} @@ -16199,16 +16645,33 @@ packages: - supports-color dev: true + /workbox-cacheable-response@6.5.4: + resolution: {integrity: sha512-DCR9uD0Fqj8oB2TSWQEm1hbFs/85hXXoayVwFKLVuIuxwJaihBsLsp4y7J9bvZbqtPJ1KlCkmYVGQKrBU4KAug==} + dependencies: + workbox-core: 6.5.4 + dev: true + /workbox-cacheable-response@7.0.0: resolution: {integrity: sha512-0lrtyGHn/LH8kKAJVOQfSu3/80WDc9Ma8ng0p2i/5HuUndGttH+mGMSvOskjOdFImLs2XZIimErp7tSOPmu/6g==} dependencies: workbox-core: 7.0.0 dev: true + /workbox-core@6.5.4: + resolution: {integrity: sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q==} + dev: true + /workbox-core@7.0.0: resolution: {integrity: sha512-81JkAAZtfVP8darBpfRTovHg8DGAVrKFgHpOArZbdFd78VqHr5Iw65f2guwjE2NlCFbPFDoez3D3/6ZvhI/rwQ==} dev: true + /workbox-expiration@6.5.4: + resolution: {integrity: sha512-jUP5qPOpH1nXtjGGh1fRBa1wJL2QlIb5mGpct3NzepjGG2uFFBn4iiEBiI9GUmfAFR2ApuRhDydjcRmYXddiEQ==} + dependencies: + idb: 7.1.1 + workbox-core: 6.5.4 + dev: true + /workbox-expiration@7.0.0: resolution: {integrity: sha512-MLK+fogW+pC3IWU9SFE+FRStvDVutwJMR5if1g7oBJx3qwmO69BNoJQVaMXq41R0gg3MzxVfwOGKx3i9P6sOLQ==} dependencies: @@ -16216,6 +16679,15 @@ packages: workbox-core: 7.0.0 dev: true + /workbox-google-analytics@6.5.4: + resolution: {integrity: sha512-8AU1WuaXsD49249Wq0B2zn4a/vvFfHkpcFfqAFHNHwln3jK9QUYmzdkKXGIZl9wyKNP+RRX30vcgcyWMcZ9VAg==} + dependencies: + workbox-background-sync: 6.5.4 + workbox-core: 6.5.4 + workbox-routing: 6.5.4 + workbox-strategies: 6.5.4 + dev: true + /workbox-google-analytics@7.0.0: resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==} dependencies: @@ -16225,12 +16697,26 @@ packages: workbox-strategies: 7.0.0 dev: true + /workbox-navigation-preload@6.5.4: + resolution: {integrity: sha512-IIwf80eO3cr8h6XSQJF+Hxj26rg2RPFVUmJLUlM0+A2GzB4HFbQyKkrgD5y2d84g2IbJzP4B4j5dPBRzamHrng==} + dependencies: + workbox-core: 6.5.4 + dev: true + /workbox-navigation-preload@7.0.0: resolution: {integrity: sha512-juWCSrxo/fiMz3RsvDspeSLGmbgC0U9tKqcUPZBCf35s64wlaLXyn2KdHHXVQrb2cqF7I0Hc9siQalainmnXJA==} dependencies: workbox-core: 7.0.0 dev: true + /workbox-precaching@6.5.4: + resolution: {integrity: sha512-hSMezMsW6btKnxHB4bFy2Qfwey/8SYdGWvVIKFaUm8vJ4E53JAY+U2JwLTRD8wbLWoP6OVUdFlXsTdKu9yoLTg==} + dependencies: + workbox-core: 6.5.4 + workbox-routing: 6.5.4 + workbox-strategies: 6.5.4 + dev: true + /workbox-precaching@7.0.0: resolution: {integrity: sha512-EC0vol623LJqTJo1mkhD9DZmMP604vHqni3EohhQVwhJlTgyKyOkMrZNy5/QHfOby+39xqC01gv4LjOm4HSfnA==} dependencies: @@ -16239,12 +16725,29 @@ packages: workbox-strategies: 7.0.0 dev: true + /workbox-range-requests@6.5.4: + resolution: {integrity: sha512-Je2qR1NXCFC8xVJ/Lux6saH6IrQGhMpDrPXWZWWS8n/RD+WZfKa6dSZwU+/QksfEadJEr/NfY+aP/CXFFK5JFg==} + dependencies: + workbox-core: 6.5.4 + dev: true + /workbox-range-requests@7.0.0: resolution: {integrity: sha512-SxAzoVl9j/zRU9OT5+IQs7pbJBOUOlriB8Gn9YMvi38BNZRbM+RvkujHMo8FOe9IWrqqwYgDFBfv6sk76I1yaQ==} dependencies: workbox-core: 7.0.0 dev: true + /workbox-recipes@6.5.4: + resolution: {integrity: sha512-QZNO8Ez708NNwzLNEXTG4QYSKQ1ochzEtRLGaq+mr2PyoEIC1xFW7MrWxrONUxBFOByksds9Z4//lKAX8tHyUA==} + dependencies: + workbox-cacheable-response: 6.5.4 + workbox-core: 6.5.4 + workbox-expiration: 6.5.4 + workbox-precaching: 6.5.4 + workbox-routing: 6.5.4 + workbox-strategies: 6.5.4 + dev: true + /workbox-recipes@7.0.0: resolution: {integrity: sha512-DntcK9wuG3rYQOONWC0PejxYYIDHyWWZB/ueTbOUDQgefaeIj1kJ7pdP3LZV2lfrj8XXXBWt+JDRSw1lLLOnww==} dependencies: @@ -16256,18 +16759,37 @@ packages: workbox-strategies: 7.0.0 dev: true + /workbox-routing@6.5.4: + resolution: {integrity: sha512-apQswLsbrrOsBUWtr9Lf80F+P1sHnQdYodRo32SjiByYi36IDyL2r7BH1lJtFX8fwNHDa1QOVY74WKLLS6o5Pg==} + dependencies: + workbox-core: 6.5.4 + dev: true + /workbox-routing@7.0.0: resolution: {integrity: sha512-8YxLr3xvqidnbVeGyRGkaV4YdlKkn5qZ1LfEePW3dq+ydE73hUUJJuLmGEykW3fMX8x8mNdL0XrWgotcuZjIvA==} dependencies: workbox-core: 7.0.0 dev: true + /workbox-strategies@6.5.4: + resolution: {integrity: sha512-DEtsxhx0LIYWkJBTQolRxG4EI0setTJkqR4m7r4YpBdxtWJH1Mbg01Cj8ZjNOO8etqfA3IZaOPHUxCs8cBsKLw==} + dependencies: + workbox-core: 6.5.4 + dev: true + /workbox-strategies@7.0.0: resolution: {integrity: sha512-dg3qJU7tR/Gcd/XXOOo7x9QoCI9nk74JopaJaYAQ+ugLi57gPsXycVdBnYbayVj34m6Y8ppPwIuecrzkpBVwbA==} dependencies: workbox-core: 7.0.0 dev: true + /workbox-streams@6.5.4: + resolution: {integrity: sha512-FXKVh87d2RFXkliAIheBojBELIPnWbQdyDvsH3t74Cwhg0fDheL1T8BqSM86hZvC0ZESLsznSYWw+Va+KVbUzg==} + dependencies: + workbox-core: 6.5.4 + workbox-routing: 6.5.4 + dev: true + /workbox-streams@7.0.0: resolution: {integrity: sha512-moVsh+5to//l6IERWceYKGiftc+prNnqOp2sgALJJFbnNVpTXzKISlTIsrWY+ogMqt+x1oMazIdHj25kBSq/HQ==} dependencies: @@ -16275,10 +16797,21 @@ packages: workbox-routing: 7.0.0 dev: true + /workbox-sw@6.5.4: + resolution: {integrity: sha512-vo2RQo7DILVRoH5LjGqw3nphavEjK4Qk+FenXeUsknKn14eCNedHOXWbmnvP4ipKhlE35pvJ4yl4YYf6YsJArA==} + dev: true + /workbox-sw@7.0.0: resolution: {integrity: sha512-SWfEouQfjRiZ7GNABzHUKUyj8pCoe+RwjfOIajcx6J5mtgKkN+t8UToHnpaJL5UVVOf5YhJh+OHhbVNIHe+LVA==} dev: true + /workbox-window@6.5.4: + resolution: {integrity: sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==} + dependencies: + '@types/trusted-types': 2.0.2 + workbox-core: 6.5.4 + dev: true + /workbox-window@7.0.0: resolution: {integrity: sha512-j7P/bsAWE/a7sxqTzXo3P2ALb1reTfZdvVp6OJ/uLr/C2kZAMvjeWGm8V4htQhor7DOvYg0sSbFN2+flT5U0qA==} dependencies: From 1c8497474a47e9a271ac6893ae38596c6ff70cca Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Tue, 4 Jul 2023 20:45:22 +0530 Subject: [PATCH 015/126] Fixed prettier issues --- .../xychart/chartBuilder/Interfaces.ts | 11 ++-- .../chartBuilder/components/ChartTitle.ts | 22 ++++--- .../chartBuilder/components/axis/BaseAxis.ts | 16 +++-- .../chartBuilder/components/axis/index.ts | 12 ++-- .../chartBuilder/components/plot/BarPlot.ts | 6 +- .../components/plot/PlotBorder.ts | 5 +- .../chartBuilder/components/plot/index.ts | 64 +++++++++---------- .../diagrams/xychart/chartBuilder/index.ts | 6 +- .../xychart/parser/xychart.jison.spec.ts | 17 ++--- .../mermaid/src/diagrams/xychart/xychartDb.ts | 6 +- 10 files changed, 82 insertions(+), 83 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index fcf6425088..efee023ba1 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -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; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 3cad0dea05..a9225e57d8 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -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 ( diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index 861b6dd8e2..f8245270bd 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -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(); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index e48a0e8455..23df3cdba5 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -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); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index 0348ef4b1f..dbb333b7b7 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -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 { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts index 2eb475d1fa..ab46689991 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts @@ -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; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index e9ebd8e922..61016c0218 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -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); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 7d71e78c79..badadf2aa7 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -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)}`); diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 2b96a63f78..6057931108 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -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]); diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index f4c7044556..eb43d63154 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -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(); From 958f63ecd234253b99266cde0d9070aab527de8d Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Wed, 5 Jul 2023 11:35:57 +0530 Subject: [PATCH 016/126] Improved parsing to work for minimal configuration possible. --- demos/xychart.html | 6 +- .../xychart/chartBuilder/Interfaces.ts | 12 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 105 ++++++++++++++---- 3 files changed, 95 insertions(+), 28 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index 5803de4b80..ea24e4872f 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -39,11 +39,9 @@ <h1>XY Charts demos</h1> <hr /> <h1>XY Charts demos</h1> <pre class="mermaid"> - xychart-beta horizontal - title Basic xychart - x-axis "this is x axis" [category1, "category 2", category3, category4] - y-axis yaxisText 10 --> 150 + xychart-beta line [23, 46, 75, 43] + bar "sample bat" [52, 96, 35, 10] </pre> <hr /> diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index efee023ba1..54b7bc004a 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -4,7 +4,7 @@ export interface ChartComponent { getDrawableElements(): DrawableElem[]; } -export type SimplePlotDataType = [string | number, number][]; +export type SimplePlotDataType = [string, number][]; export interface LinePlotData { type: 'line'; @@ -26,11 +26,13 @@ export function isBarPlot(data: PlotData): data is BarPlotData { } export interface BandAxisDataType { + type: 'band'; title: string; categories: string[]; } export interface LinearAxisDataType { + type: 'linear'; title: string; min: number; max: number; @@ -38,8 +40,12 @@ export interface LinearAxisDataType { export type AxisDataType = LinearAxisDataType | BandAxisDataType; -export function isBandAxisData(data: any): data is BandAxisDataType { - return data.categories && Array.isArray(data.categories); +export function isBandAxisData(data: AxisDataType): data is BandAxisDataType { + return data.type === 'band'; +} + +export function isLinearAxisData(data: AxisDataType): data is LinearAxisDataType { + return data.type === 'linear'; } export interface XYChartData { diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index eb43d63154..a8d6971c8a 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -12,7 +12,13 @@ import { clear as commonClear, } from '../../commonDb.js'; import { XYChartBuilder } from './chartBuilder/index.js'; -import { DrawableElem, XYChartData, isBandAxisData } from './chartBuilder/Interfaces.js'; +import { + DrawableElem, + SimplePlotDataType, + XYChartData, + isBandAxisData, + isLinearAxisData, +} from './chartBuilder/Interfaces.js'; import { XYChartConfig } from '../../config.type.js'; const config = configApi.getConfig(); @@ -64,12 +70,14 @@ function getChartDefaultConfig(): XYChartConfig { function getChartDefalutData(): XYChartData { return { yAxis: { - title: 'yAxis1', - min: 0, - max: 100, + type: 'linear', + title: '', + min: Infinity, + max: -Infinity, }, xAxis: { - title: 'xAxis', + type: 'band', + title: '', categories: [], }, title: '', @@ -79,6 +87,8 @@ function getChartDefalutData(): XYChartData { let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartData: XYChartData = getChartDefalutData(); +let hasSetXAxis = false; +let hasSetYAxis = false; function textSanitizer(text: string) { return sanitizeText(text.trim(), config); @@ -100,41 +110,92 @@ function setXAxisTitle(title: string) { xyChartData.xAxis.title = textSanitizer(title); } function setXAxisRangeData(min: number, max: number) { - xyChartData.xAxis = { title: xyChartData.xAxis.title, min, max }; + xyChartData.xAxis = { type: 'linear', title: xyChartData.xAxis.title, min, max }; + hasSetXAxis = true; } function setXAxisBand(categories: string[]) { xyChartData.xAxis = { + type: 'band', title: xyChartData.xAxis.title, categories: categories.map((c) => textSanitizer(c)), }; + hasSetXAxis = true; } function setYAxisTitle(title: string) { xyChartData.yAxis.title = textSanitizer(title); } function setYAxisRangeData(min: number, max: number) { - xyChartData.yAxis = { title: xyChartData.yAxis.title, min, max }; + xyChartData.yAxis = { type: 'linear', title: xyChartData.yAxis.title, min, max }; + hasSetYAxis = true; } -function setLineData(title: string, data: number[]) { + +// this function does not set `hasSetYAxis` as there can be multiple data so we should calculate the range accordingly +function setYAxisRangeFromPlotData(data: number[]) { + const minValue = Math.min(...data); + const maxValue = Math.max(...data); + const prevMinValue = isLinearAxisData(xyChartData.yAxis) ? xyChartData.yAxis.min : Infinity; + const prevMaxValue = isLinearAxisData(xyChartData.yAxis) ? xyChartData.yAxis.max : -Infinity; + xyChartData.yAxis = { + type: 'linear', + title: xyChartData.yAxis.title, + min: Math.min(prevMinValue, minValue), + max: Math.max(prevMaxValue, maxValue), + }; +} + +function transformDataWithOutCategory(data: number[]): SimplePlotDataType { + let retData: SimplePlotDataType = []; + if (data.length === 0) { + return retData; + } + if (!hasSetXAxis) { + const prevMinValue = isLinearAxisData(xyChartData.xAxis) ? xyChartData.xAxis.min : Infinity; + const prevMaxValue = isLinearAxisData(xyChartData.xAxis) ? xyChartData.xAxis.max : -Infinity; + setXAxisRangeData(Math.min(prevMinValue, 1), Math.max(prevMaxValue, data.length)); + } + if (!hasSetYAxis) { + setYAxisRangeFromPlotData(data); + } + if (isBandAxisData(xyChartData.xAxis)) { - xyChartData.plots.push({ - type: 'line', - strokeFill: '#00ff00', - strokeWidth: 2, - data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]), - }); + retData = xyChartData.xAxis.categories.map((c, i) => [c, data[i]]); + } + + if (isLinearAxisData(xyChartData.xAxis)) { + const min = xyChartData.xAxis.min; + const max = xyChartData.xAxis.max; + const step = (max - min + 1) / data.length; + const categories: string[] = []; + for (let i = min; i <= max; i += step) { + categories.push(`${i}`); + } + retData = categories.map((c, i) => [c, data[i]]); } + + return retData; +} +function setLineData(title: string, data: number[]) { + const plotData = transformDataWithOutCategory(data); + xyChartData.plots.push({ + type: 'line', + strokeFill: '#00ff00', + strokeWidth: 2, + data: plotData, + }); } function setBarData(title: string, data: number[]) { - if (isBandAxisData(xyChartData.xAxis)) { - xyChartData.plots.push({ - type: 'bar', - fill: '#0000bb', - data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]), - }); - } + const plotData = transformDataWithOutCategory(data); + xyChartData.plots.push({ + type: 'bar', + fill: '#0000bb', + data: plotData, + }); } function getDrawableElem(): DrawableElem[] { + if (xyChartData.plots.length === 0) { + throw Error('No Plot to render, please provide a plot with some data'); + } xyChartData.title = getDiagramTitle(); return XYChartBuilder.build(xyChartConfig, xyChartData); } @@ -151,6 +212,8 @@ const clear = function () { commonClear(); xyChartConfig = getChartDefaultConfig(); xyChartData = getChartDefalutData(); + hasSetXAxis = false; + hasSetYAxis = false; }; export default { From da1f46aadaf3a6bd0c074ce913d0cd6afc1eb9e3 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Wed, 5 Jul 2023 11:50:06 +0530 Subject: [PATCH 017/126] Blank commit as commit is not reflecting in the main repo From 5fd4ca2d41bb7c3a4c6880137255c1234aa5efbc Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Wed, 19 Jul 2023 20:52:34 +0530 Subject: [PATCH 018/126] added updated lock file --- pnpm-lock.yaml | 40 +++++++++++++++------------------------- 1 file changed, 15 insertions(+), 25 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bd9cf4f298..53d735b021 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -581,6 +581,12 @@ packages: - supports-color dev: true + /@algolia/autocomplete-core@1.7.4: + resolution: {integrity: sha512-daoLpQ3ps/VTMRZDEBfU8ixXd+amZcNJ4QSP3IERGyzqnL5Ch8uSRFt/4G8pUvW9c3o6GA4vtVv4I4lmnkdXyg==} + dependencies: + '@algolia/autocomplete-shared': 1.7.4 + dev: true + /@algolia/autocomplete-core@1.8.2: resolution: {integrity: sha512-mTeshsyFhAqw/ebqNsQpMtbnjr+qVOSKXArEj4K0d7sqc8It1XD0gkASwecm9mF/jlOQ4Z9RNg1HbdA8JPdRwQ==} dependencies: @@ -3867,7 +3873,7 @@ packages: slash: 3.0.0 string-length: 4.0.2 strip-ansi: 6.0.1 - v8-to-istanbul: 9.0.1 + v8-to-istanbul: 9.1.0 transitivePeerDependencies: - supports-color dev: true @@ -5653,7 +5659,7 @@ packages: '@vue/reactivity-transform': 3.3.4 '@vue/shared': 3.3.4 estree-walker: 2.0.2 - magic-string: 0.30.0 + magic-string: 0.30.1 postcss: 8.4.24 source-map-js: 1.0.2 dev: true @@ -5690,7 +5696,7 @@ packages: '@vue/compiler-core': 3.3.4 '@vue/shared': 3.3.4 estree-walker: 2.0.2 - magic-string: 0.30.0 + magic-string: 0.30.1 dev: true /@vue/reactivity@3.2.47: @@ -6156,12 +6162,6 @@ packages: hasBin: true dev: true - /acorn@8.10.0: - resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==} - engines: {node: '>=0.4.0'} - hasBin: true - dev: true - /acorn@8.8.0: resolution: {integrity: sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==} engines: {node: '>=0.4.0'} @@ -12445,7 +12445,6 @@ packages: /mlly@1.4.0: resolution: {integrity: sha512-ua8PAThnTwpprIaU47EPeZ/bPUVp2QYBbWMphUQpVdBI3Lgqzm5KZQ45Agm3YJedHXaIHl6pBGabaLSUPPSptg==} dependencies: - acorn: 8.10.0 acorn: 8.9.0 pathe: 1.1.1 pkg-types: 1.0.3 @@ -13220,7 +13219,7 @@ packages: trouter: 2.0.1 dev: true - /postcss-import@15.1.0(postcss@8.4.24): + /postcss-import@15.1.0(postcss@8.4.23): resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} peerDependencies: @@ -14671,7 +14670,7 @@ packages: /strip-literal@1.0.1: resolution: {integrity: sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==} dependencies: - acorn: 8.10.0 + acorn: 8.9.0 dev: true /stylis@4.1.3: @@ -15587,7 +15586,7 @@ packages: /uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} dependencies: - punycode: 2.1.1 + punycode: 2.3.0 dev: true /url-parse@1.5.10: @@ -15628,15 +15627,6 @@ packages: /v8-compile-cache-lib@3.0.1: resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==} - /v8-to-istanbul@9.0.1: - resolution: {integrity: sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==} - engines: {node: '>=10.12.0'} - dependencies: - '@jridgewell/trace-mapping': 0.3.17 - '@types/istanbul-lib-coverage': 2.0.4 - convert-source-map: 1.8.0 - dev: true - /v8-to-istanbul@9.1.0: resolution: {integrity: sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==} engines: {node: '>=10.12.0'} @@ -16016,7 +16006,7 @@ packages: '@vitest/spy': 0.33.0 '@vitest/ui': 0.33.0(vitest@0.33.0) '@vitest/utils': 0.33.0 - acorn: 8.10.0 + acorn: 8.9.0 acorn-walk: 8.2.0 cac: 6.7.14 chai: 4.3.7 @@ -16557,7 +16547,7 @@ packages: resolution: {integrity: sha512-kgRevLXEYvUW9WS4XoziYqZ8Q9j/2ziJYEtTrjdz5/L/cTUa2XfyMP2i7c3p34lgqJ03+mTiz13SdFef2POwbA==} engines: {node: '>=10.0.0'} dependencies: - '@apideck/better-ajv-errors': 0.3.6(ajv@8.11.0) + '@apideck/better-ajv-errors': 0.3.6(ajv@8.12.0) '@babel/core': 7.12.3 '@babel/preset-env': 7.20.2(@babel/core@7.12.3) '@babel/runtime': 7.21.0 @@ -16565,7 +16555,7 @@ packages: '@rollup/plugin-node-resolve': 11.2.1(rollup@2.79.1) '@rollup/plugin-replace': 2.4.2(rollup@2.79.1) '@surma/rollup-plugin-off-main-thread': 2.2.3 - ajv: 8.11.0 + ajv: 8.12.0 common-tags: 1.8.2 fast-json-stable-stringify: 2.1.0 fs-extra: 9.1.0 From c38cdcf2b2660f9f4559b1ed87d1c0aaaac1a767 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Wed, 19 Jul 2023 22:41:41 +0530 Subject: [PATCH 019/126] Introduced theme config to configure cosmetics --- packages/mermaid/src/config.type.ts | 54 +++++++++---------- .../xychart/chartBuilder/Interfaces.ts | 19 +++++++ .../xychart/chartBuilder/Orchestrator.ts | 34 +++++++++--- .../chartBuilder/components/ChartTitle.ts | 11 ++-- .../chartBuilder/components/axis/BandAxis.ts | 4 +- .../chartBuilder/components/axis/BaseAxis.ts | 29 ++++++---- .../components/axis/LinearAxis.ts | 4 +- .../chartBuilder/components/axis/index.ts | 24 +++++++-- .../chartBuilder/components/plot/BarPlot.ts | 5 +- .../chartBuilder/components/plot/LinePlot.ts | 5 +- .../components/plot/PlotBorder.ts | 9 ++-- .../chartBuilder/components/plot/index.ts | 35 +++++++++--- .../diagrams/xychart/chartBuilder/index.ts | 11 ++-- .../mermaid/src/diagrams/xychart/xychartDb.ts | 49 +++++++++++++---- packages/mermaid/src/themes/theme-default.js | 15 ++++++ pnpm-lock.yaml | 6 ++- 16 files changed, 230 insertions(+), 84 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index aa9f2b81ed..4a392673d9 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -8,7 +8,7 @@ /** * Configuration options to pass to the `dompurify` library. */ -export type DOMPurifyConfiguration = import("dompurify").Config; +export type DOMPurifyConfiguration = import('dompurify').Config; /** * JavaScript function that returns a `FontConfig`. * @@ -39,7 +39,7 @@ export type FontCalculator = () => Partial<FontConfig>; * This interface was referenced by `MermaidConfig`'s JSON-Schema * via the `definition` "SankeyLinkColor". */ -export type SankeyLinkColor = "source" | "target" | "gradient"; +export type SankeyLinkColor = 'source' | 'target' | 'gradient'; /** * Controls the alignment of the Sankey diagrams. * @@ -49,7 +49,7 @@ export type SankeyLinkColor = "source" | "target" | "gradient"; * This interface was referenced by `MermaidConfig`'s JSON-Schema * via the `definition` "SankeyNodeAlignment". */ -export type SankeyNodeAlignment = "left" | "right" | "center" | "justify"; +export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify'; /** * The font size to use */ @@ -61,7 +61,7 @@ export interface MermaidConfig { * You may also use `themeCSS` to override this value. * */ - theme?: string | "default" | "forest" | "dark" | "neutral" | "null"; + theme?: string | 'default' | 'forest' | 'dark' | 'neutral' | 'null'; themeVariables?: any; themeCSS?: string; /** @@ -88,12 +88,12 @@ export interface MermaidConfig { | 0 | 2 | 1 - | "trace" - | "debug" - | "info" - | "warn" - | "error" - | "fatal" + | 'trace' + | 'debug' + | 'info' + | 'warn' + | 'error' + | 'fatal' | 3 | 4 | 5 @@ -101,7 +101,7 @@ export interface MermaidConfig { /** * Level of trust for parsed diagram */ - securityLevel?: string | "strict" | "loose" | "antiscript" | "sandbox" | undefined; + securityLevel?: string | 'strict' | 'loose' | 'antiscript' | 'sandbox' | undefined; /** * Dictates whether mermaid starts on Page load */ @@ -690,11 +690,11 @@ export interface QuadrantChartConfig extends BaseDiagramConfig { /** * position of x-axis labels */ - xAxisPosition?: "top" | "bottom"; + xAxisPosition?: 'top' | 'bottom'; /** * position of y-axis labels */ - yAxisPosition?: "left" | "right"; + yAxisPosition?: 'left' | 'right'; /** * stroke width of edges of the box that are inside the quadrant */ @@ -709,15 +709,12 @@ export interface XYChartAxisConfig { showLabel: boolean; labelFontSize: number; lablePadding: number; - labelFill: string; showTitle: boolean; titleFontSize: number; titlePadding: number; - titleFill: string; showTick: boolean; tickLength: number; tickWidth: number; - tickFill: string; } export interface XYChartConfig extends BaseDiagramConfig { @@ -725,7 +722,6 @@ export interface XYChartConfig extends BaseDiagramConfig { height: number; fontFamily: string; titleFontSize: number; - titleFill: string; titlePadding: number; showtitle: boolean; xAxis: XYChartAxisConfig; @@ -755,7 +751,7 @@ export interface ErDiagramConfig extends BaseDiagramConfig { /** * Directional bias for layout of entities */ - layoutDirection?: string | "TB" | "BT" | "LR" | "RL"; + layoutDirection?: string | 'TB' | 'BT' | 'LR' | 'RL'; /** * The minimum width of an entity box. Expressed in pixels. */ @@ -820,7 +816,7 @@ export interface StateDiagramConfig extends BaseDiagramConfig { * Decides which rendering engine that is to be used for the rendering. * */ - defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk"; + defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk'; } /** * This interface was referenced by `MermaidConfig`'s JSON-Schema @@ -844,7 +840,7 @@ export interface ClassDiagramConfig extends BaseDiagramConfig { * Decides which rendering engine that is to be used for the rendering. * */ - defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk"; + defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk'; nodeSpacing?: number; rankSpacing?: number; /** @@ -904,7 +900,7 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig { /** * Multiline message alignment */ - messageAlign?: string | "left" | "center" | "right"; + messageAlign?: string | 'left' | 'center' | 'right'; /** * Prolongs the edge of the diagram downwards. * @@ -983,7 +979,7 @@ export interface TimelineDiagramConfig extends BaseDiagramConfig { /** * Multiline message alignment */ - messageAlign?: string | "left" | "center" | "right"; + messageAlign?: string | 'left' | 'center' | 'right'; /** * Prolongs the edge of the diagram downwards. * @@ -1094,12 +1090,12 @@ export interface GanttDiagramConfig extends BaseDiagramConfig { * Controls the display mode. * */ - displayMode?: string | "compact"; + displayMode?: string | 'compact'; /** * On which day a week-based interval should start * */ - weekday?: "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"; + weekday?: 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday'; } /** * The object containing configurations specific for sequence diagrams @@ -1153,7 +1149,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig { /** * Multiline message alignment */ - messageAlign?: string | "left" | "center" | "right"; + messageAlign?: string | 'left' | 'center' | 'right'; /** * Mirror actors under diagram * @@ -1210,7 +1206,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig { /** * This sets the text alignment of actor-attached notes */ - noteAlign?: string | "left" | "center" | "right"; + noteAlign?: string | 'left' | 'center' | 'right'; /** * This sets the font size of actor messages */ @@ -1286,7 +1282,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { * Defines how mermaid renders curves for flowcharts. * */ - curve?: string | "basis" | "linear" | "cardinal"; + curve?: string | 'basis' | 'linear' | 'cardinal'; /** * Represents the padding between the labels and the shape * @@ -1298,7 +1294,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { * Decides which rendering engine that is to be used for the rendering. * */ - defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk"; + defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk'; /** * Width of nodes where text is wrapped. * @@ -1328,7 +1324,7 @@ export interface SankeyDiagramConfig extends BaseDiagramConfig { * See <https://github.com/d3/d3-sankey#alignments>. * */ - nodeAlignment?: "left" | "right" | "center" | "justify"; + nodeAlignment?: 'left' | 'right' | 'center' | 'justify'; useMaxWidth?: boolean; } /** diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 54b7bc004a..6968dee480 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -1,3 +1,22 @@ +export interface XYChartAxisThemeConfig { + titleColor: string; + labelColor: string; + tickColor: string; +} + +export interface XYChartThemeConfig { + xychartTitleColor: string; + xychartAxisLineColor: string; + xychartXAxisLableColor: string; + xychartXAxisTitleColor: string; + xychartXAxisTickColor: string; + xychartYAxisLableColor: string; + xychartYAxisTitleColor: string; + xychartYAxisTickColor: string; + xychartBarPlotPalette: string[]; + xychartLinePlotPalette: string[]; +} + export interface ChartComponent { calculateSpace(availableSpace: Dimension): Dimension; setBoundingBoxXY(point: Point): void; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index 5f187267cb..d4c80b5597 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,5 +1,5 @@ import { log } from '../../../logger.js'; -import { DrawableElem, XYChartData, isBarPlot } from './Interfaces.js'; +import { DrawableElem, XYChartData, XYChartThemeConfig, isBarPlot } from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; import { ChartComponent } from './Interfaces.js'; import { IAxis, getAxis } from './components/axis/index.js'; @@ -13,12 +13,34 @@ export class Orchestrator { xAxis: IAxis; yAxis: IAxis; }; - constructor(private chartConfig: XYChartConfig, private chartData: XYChartData) { + constructor( + private chartConfig: XYChartConfig, + private chartData: XYChartData, + private chartThemeConfig: XYChartThemeConfig + ) { this.componentStore = { - title: getChartTitleComponent(chartConfig, chartData), - plot: getPlotComponent(chartConfig, chartData), - xAxis: getAxis(chartData.xAxis, chartConfig.xAxis, chartConfig.fontFamily), - yAxis: getAxis(chartData.yAxis, chartConfig.yAxis, chartConfig.fontFamily), + title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig), + plot: getPlotComponent(chartConfig, chartData, chartThemeConfig), + xAxis: getAxis( + chartData.xAxis, + chartConfig.xAxis, + { + titleColor: chartThemeConfig.xychartXAxisTitleColor, + labelColor: chartThemeConfig.xychartXAxisLableColor, + tickColor: chartThemeConfig.xychartXAxisTickColor, + }, + chartConfig.fontFamily + ), + yAxis: getAxis( + chartData.yAxis, + chartConfig.yAxis, + { + titleColor: chartThemeConfig.xychartYAxisTitleColor, + labelColor: chartThemeConfig.xychartYAxisLableColor, + tickColor: chartThemeConfig.xychartYAxisTickColor, + }, + chartConfig.fontFamily + ), }; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index a9225e57d8..0de677f259 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -6,6 +6,7 @@ import { DrawableElem, Point, XYChartData, + XYChartThemeConfig, } from '../Interfaces.js'; import { ITextDimensionCalculator, @@ -18,7 +19,8 @@ export class ChartTitle implements ChartComponent { constructor( private textDimensionCalculator: ITextDimensionCalculator, private chartConfig: XYChartConfig, - private chartData: XYChartData + private chartData: XYChartData, + private chartThemeConfig: XYChartThemeConfig ) { this.boundingRect = { x: 0, @@ -67,7 +69,7 @@ export class ChartTitle implements ChartComponent { horizontalPos: 'middle', x: this.boundingRect.x + this.boundingRect.width / 2, y: this.boundingRect.y + this.boundingRect.height / 2, - fill: this.chartConfig.titleFill, + fill: this.chartThemeConfig.xychartTitleColor, rotation: 0, }, ], @@ -79,8 +81,9 @@ export class ChartTitle implements ChartComponent { export function getChartTitleComponent( chartConfig: XYChartConfig, - chartData: XYChartData + chartData: XYChartData, + chartThemeConfig: XYChartThemeConfig ): ChartComponent { const textDimensionCalculator = new TextDimensionCalculatorWithFont(chartConfig.fontFamily); - return new ChartTitle(textDimensionCalculator, chartConfig, chartData); + return new ChartTitle(textDimensionCalculator, chartConfig, chartData, chartThemeConfig); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts index 9a5334097c..6c354cd510 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts @@ -3,6 +3,7 @@ import { XYChartAxisConfig } from '../../../../../config.type.js'; import { log } from '../../../../../logger.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; +import { XYChartAxisThemeConfig } from '../../Interfaces.js'; export class BandAxis extends BaseAxis { private scale: ScaleBand<string>; @@ -10,11 +11,12 @@ export class BandAxis extends BaseAxis { constructor( axisConfig: XYChartAxisConfig, + axisThemeConfig: XYChartAxisThemeConfig, categories: string[], title: string, textDimensionCalculator: ITextDimensionCalculator ) { - super(axisConfig, title, textDimensionCalculator); + super(axisConfig, title, textDimensionCalculator, axisThemeConfig); this.categories = categories; this.scale = scaleBand().domain(this.categories).range(this.getRange()); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index f8245270bd..a9e5516268 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -1,6 +1,12 @@ import { XYChartAxisConfig } from '../../../../../config.type.js'; import { log } from '../../../../../logger.js'; -import { BoundingRect, Dimension, DrawableElem, Point } from '../../Interfaces.js'; +import { + BoundingRect, + Dimension, + DrawableElem, + Point, + XYChartAxisThemeConfig, +} from '../../Interfaces.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { AxisPosition, IAxis } from './index.js'; @@ -16,7 +22,8 @@ export abstract class BaseAxis implements IAxis { constructor( protected axisConfig: XYChartAxisConfig, protected title: string, - protected textDimensionCalculator: ITextDimensionCalculator + protected textDimensionCalculator: ITextDimensionCalculator, + protected axisThemeConfig: XYChartAxisThemeConfig ) { this.range = [0, 10]; this.boundingRect = { x: 0, y: 0, width: 0, height: 0 }; @@ -164,7 +171,7 @@ export abstract class BaseAxis implements IAxis { this.axisConfig.lablePadding - this.axisConfig.tickLength, y: this.getScaleValue(tick), - fill: this.axisConfig.labelFill, + fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, verticalPos: 'right', @@ -181,7 +188,7 @@ export abstract class BaseAxis implements IAxis { path: `M ${x},${this.getScaleValue(tick)} L ${ x - this.axisConfig.tickLength },${this.getScaleValue(tick)}`, - strokeFill: this.axisConfig.tickFill, + strokeFill: this.axisThemeConfig.tickColor, strokeWidth: this.axisConfig.tickWidth, })), }); @@ -195,7 +202,7 @@ export abstract class BaseAxis implements IAxis { text: this.title, x: this.boundingRect.x + this.axisConfig.titlePadding, y: this.range[0] + (this.range[1] - this.range[0]) / 2, - fill: this.axisConfig.titleFill, + fill: this.axisThemeConfig.titleColor, fontSize: this.axisConfig.titleFontSize, rotation: 270, verticalPos: 'center', @@ -216,7 +223,7 @@ export abstract class BaseAxis implements IAxis { text: tick.toString(), x: this.getScaleValue(tick), y: this.boundingRect.y + this.axisConfig.lablePadding + this.axisConfig.tickLength, - fill: this.axisConfig.labelFill, + fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, verticalPos: 'center', @@ -233,7 +240,7 @@ export abstract class BaseAxis implements IAxis { path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${ y + this.axisConfig.tickLength }`, - strokeFill: this.axisConfig.tickFill, + strokeFill: this.axisThemeConfig.tickColor, strokeWidth: this.axisConfig.tickWidth, })), }); @@ -247,7 +254,7 @@ export abstract class BaseAxis implements IAxis { text: this.title, x: this.range[0] + (this.range[1] - this.range[0]) / 2, y: this.boundingRect.y + this.boundingRect.height - this.axisConfig.titlePadding, - fill: this.axisConfig.titleFill, + fill: this.axisThemeConfig.titleColor, fontSize: this.axisConfig.titleFontSize, rotation: 0, verticalPos: 'center', @@ -272,7 +279,7 @@ export abstract class BaseAxis implements IAxis { this.boundingRect.height - this.axisConfig.lablePadding - this.axisConfig.tickLength, - fill: this.axisConfig.labelFill, + fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, verticalPos: 'center', @@ -291,7 +298,7 @@ export abstract class BaseAxis implements IAxis { } L ${this.getScaleValue(tick)},${ y + this.boundingRect.height - this.axisConfig.tickLength }`, - strokeFill: this.axisConfig.tickFill, + strokeFill: this.axisThemeConfig.tickColor, strokeWidth: this.axisConfig.tickWidth, })), }); @@ -305,7 +312,7 @@ export abstract class BaseAxis implements IAxis { text: this.title, x: this.range[0] + (this.range[1] - this.range[0]) / 2, y: this.boundingRect.y + this.axisConfig.titlePadding, - fill: this.axisConfig.titleFill, + fill: this.axisThemeConfig.titleColor, fontSize: this.axisConfig.titleFontSize, rotation: 0, verticalPos: 'center', diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index a9b5d3bcb0..23acf3f2a1 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -3,6 +3,7 @@ import { XYChartAxisConfig } from '../../../../../config.type.js'; import { log } from '../../../../../logger.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; +import { XYChartAxisThemeConfig } from '../../Interfaces.js'; export class LinearAxis extends BaseAxis { private scale: ScaleLinear<number, number>; @@ -10,11 +11,12 @@ export class LinearAxis extends BaseAxis { constructor( axisConfig: XYChartAxisConfig, + axisThemeConfig: XYChartAxisThemeConfig, domain: [number, number], title: string, textDimensionCalculator: ITextDimensionCalculator ) { - super(axisConfig, title, textDimensionCalculator); + super(axisConfig, title, textDimensionCalculator, axisThemeConfig); this.domain = domain; this.scale = scaleLinear().domain(this.domain).range(this.getRange()); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index 23df3cdba5..f1a3df093e 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,5 +1,10 @@ import { XYChartAxisConfig } from '../../../../../config.type.js'; -import { AxisDataType, ChartComponent, isBandAxisData } from '../../Interfaces.js'; +import { + AxisDataType, + ChartComponent, + XYChartAxisThemeConfig, + isBandAxisData, +} from '../../Interfaces.js'; import { TextDimensionCalculatorWithFont } from '../../TextDimensionCalculator.js'; import { BandAxis } from './BandAxis.js'; import { LinearAxis } from './LinearAxis.js'; @@ -18,11 +23,24 @@ export interface IAxis extends ChartComponent { export function getAxis( data: AxisDataType, axisConfig: XYChartAxisConfig, + axisThemeConfig: XYChartAxisThemeConfig, fontFamily?: string ): IAxis { const textDimansionCalculator = new TextDimensionCalculatorWithFont(fontFamily); if (isBandAxisData(data)) { - return new BandAxis(axisConfig, data.categories, data.title, textDimansionCalculator); + return new BandAxis( + axisConfig, + axisThemeConfig, + data.categories, + data.title, + textDimansionCalculator + ); } - return new LinearAxis(axisConfig, [data.min, data.max], data.title, textDimansionCalculator); + return new LinearAxis( + axisConfig, + axisThemeConfig, + [data.min, data.max], + data.title, + textDimansionCalculator + ); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index dbb333b7b7..b11a6630b1 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,5 +1,5 @@ import { XYChartConfig } from '../../../../../config.type.js'; -import { BarPlotData, BoundingRect, DrawableElem } from '../../Interfaces.js'; +import { BarPlotData, BoundingRect, DrawableElem, XYChartThemeConfig } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; export class BarPlot { @@ -8,7 +8,8 @@ export class BarPlot { private boundingRect: BoundingRect, private xAxis: IAxis, private yAxis: IAxis, - private orientation: XYChartConfig['chartOrientation'] + private orientation: XYChartConfig['chartOrientation'], + private chartThemeConfig: XYChartThemeConfig ) {} getDrawableElement(): DrawableElem[] { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index e342352b8e..c10b431a7a 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -1,5 +1,5 @@ import { line } from 'd3'; -import { DrawableElem, LinePlotData } from '../../Interfaces.js'; +import { DrawableElem, LinePlotData, XYChartThemeConfig } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; import { XYChartConfig } from '../../../../../config.type.js'; @@ -8,7 +8,8 @@ export class LinePlot { private plotData: LinePlotData, private xAxis: IAxis, private yAxis: IAxis, - private orientation: XYChartConfig['chartOrientation'] + private orientation: XYChartConfig['chartOrientation'], + private chartThemeConfig: XYChartThemeConfig ) {} getDrawableElement(): DrawableElem[] { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts index ab46689991..5796ae8da4 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts @@ -1,9 +1,10 @@ import { XYChartConfig } from '../../../../../config.type.js'; -import { BoundingRect, DrawableElem } from '../../Interfaces.js'; +import { BoundingRect, DrawableElem, XYChartThemeConfig } from '../../Interfaces.js'; export class PlotBorder { constructor( private boundingRect: BoundingRect, - private orientation: XYChartConfig['chartOrientation'] + private orientation: XYChartConfig['chartOrientation'], + private chartThemeConfig: XYChartThemeConfig ) {} getDrawableElement(): DrawableElem[] { @@ -18,7 +19,7 @@ export class PlotBorder { path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${ y + height } L ${x},${y}`, - strokeFill: '#000000', + strokeFill: this.chartThemeConfig.xychartAxisLineColor, strokeWidth: 1, }, ], @@ -34,7 +35,7 @@ export class PlotBorder { path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${ y + height } L ${x},${y}`, - strokeFill: '#000000', + strokeFill: this.chartThemeConfig.xychartAxisLineColor, strokeWidth: 1, }, ], diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 61016c0218..9e0f3cbb0d 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -1,4 +1,11 @@ -import { XYChartData, Dimension, BoundingRect, DrawableElem, Point } from '../../Interfaces.js'; +import { + XYChartData, + Dimension, + BoundingRect, + DrawableElem, + Point, + XYChartThemeConfig, +} from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; import { ChartComponent } from '../../Interfaces.js'; import { LinePlot } from './LinePlot.js'; @@ -15,7 +22,11 @@ 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, + private chartThemeConfig: XYChartThemeConfig + ) { this.boundingRect = { x: 0, y: 0, @@ -45,7 +56,11 @@ export class Plot implements IPlot { 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, + this.chartThemeConfig + ).getDrawableElement(), ]; for (const plot of this.chartData.plots) { switch (plot.type) { @@ -55,7 +70,8 @@ export class Plot implements IPlot { plot, this.xAxis, this.yAxis, - this.chartConfig.chartOrientation + this.chartConfig.chartOrientation, + this.chartThemeConfig ); drawableElem.push(...linePlot.getDrawableElement()); } @@ -67,7 +83,8 @@ export class Plot implements IPlot { this.boundingRect, this.xAxis, this.yAxis, - this.chartConfig.chartOrientation + this.chartConfig.chartOrientation, + this.chartThemeConfig ); drawableElem.push(...barPlot.getDrawableElement()); } @@ -78,6 +95,10 @@ export class Plot implements IPlot { } } -export function getPlotComponent(chartConfig: XYChartConfig, chartData: XYChartData): IPlot { - return new Plot(chartConfig, chartData); +export function getPlotComponent( + chartConfig: XYChartConfig, + chartData: XYChartData, + chartThemeConfig: XYChartThemeConfig +): IPlot { + return new Plot(chartConfig, chartData, chartThemeConfig); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index badadf2aa7..80f3b364e0 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -1,14 +1,19 @@ // @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, XYChartThemeConfig } from './Interfaces.js'; import { Orchestrator } from './Orchestrator.js'; export class XYChartBuilder { - static build(config: XYChartConfig, chartData: XYChartData): DrawableElem[] { + static build( + config: XYChartConfig, + chartData: XYChartData, + chartThemeConfig: XYChartThemeConfig + ): DrawableElem[] { log.trace(`Build start with Config: ${JSON.stringify(config, null, 2)}`); log.trace(`Build start with ChartData: ${JSON.stringify(chartData, null, 2)}`); - const orchestrator = new Orchestrator(config, chartData); + log.trace(`Build start with ChartThemeConfig: ${JSON.stringify(chartThemeConfig, null, 2)}`); + const orchestrator = new Orchestrator(config, chartData, chartThemeConfig); return orchestrator.getDrawableElement(); } } diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index a8d6971c8a..d70039f3a9 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -16,12 +16,41 @@ import { DrawableElem, SimplePlotDataType, XYChartData, + XYChartThemeConfig, isBandAxisData, isLinearAxisData, } from './chartBuilder/Interfaces.js'; import { XYChartConfig } from '../../config.type.js'; +import { getThemeVariables } from '../../themes/theme-default.js'; + +const defaultThemeVariables = getThemeVariables(); const config = configApi.getConfig(); + +function getChartDefaultThemeConfig(): XYChartThemeConfig { + return { + xychartTitleColor: + config.themeVariables?.xychartTitleColor || defaultThemeVariables.xychartTitleColor, + xychartAxisLineColor: + config.themeVariables?.xychartAxisLineColor || defaultThemeVariables.xychartAxisLineColor, + xychartXAxisLableColor: + config.themeVariables?.xychartXAxisLableColor || defaultThemeVariables.xychartXAxisLableColor, + xychartXAxisTitleColor: + config.themeVariables?.xychartXAxisTitleColor || defaultThemeVariables.xychartXAxisTitleColor, + xychartXAxisTickColor: + config.themeVariables?.xychartXAxisTickColor || defaultThemeVariables.xychartXAxisTickColor, + xychartYAxisLableColor: + config.themeVariables?.xychartYAxisLableColor || defaultThemeVariables.xychartYAxisLableColor, + xychartYAxisTitleColor: + config.themeVariables?.xychartYAxisTitleColor || defaultThemeVariables.xychartYAxisTitleColor, + xychartYAxisTickColor: + config.themeVariables?.xychartYAxisTickColor || defaultThemeVariables.xychartYAxisTickColor, + xychartBarPlotPalette: + config.themeVariables?.xychartBarPlotPalette || defaultThemeVariables.xychartBarPlotPalette, + xychartLinePlotPalette: + config.themeVariables?.xychartLinePlotPalette || defaultThemeVariables.xychartLinePlotPalette, + }; +} function getChartDefaultConfig(): XYChartConfig { return config.xyChart ? { ...config.xyChart, yAxis: { ...config.xyChart.yAxis }, xAxis: { ...config.xyChart.xAxis } } @@ -30,7 +59,6 @@ function getChartDefaultConfig(): XYChartConfig { height: 500, fontFamily: config.fontFamily || 'Sans', titleFontSize: 16, - titleFill: '#000000', titlePadding: 5, showtitle: true, plotBorderWidth: 2, @@ -38,29 +66,23 @@ function getChartDefaultConfig(): XYChartConfig { showLabel: true, labelFontSize: 14, lablePadding: 5, - labelFill: '#000000', showTitle: true, titleFontSize: 16, titlePadding: 5, - titleFill: '#000000', showTick: true, tickLength: 5, tickWidth: 2, - tickFill: '#000000', }, xAxis: { showLabel: true, labelFontSize: 14, lablePadding: 5, - labelFill: '#000000', showTitle: true, titleFontSize: 16, titlePadding: 5, - titleFill: '#000000', showTick: true, tickLength: 5, tickWidth: 2, - tickFill: '#000000', }, chartOrientation: 'vertical', plotReservedSpacePercent: 50, @@ -86,6 +108,7 @@ function getChartDefalutData(): XYChartData { } let xyChartConfig: XYChartConfig = getChartDefaultConfig(); +let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); let xyChartData: XYChartData = getChartDefalutData(); let hasSetXAxis = false; let hasSetYAxis = false; @@ -178,7 +201,10 @@ function setLineData(title: string, data: number[]) { const plotData = transformDataWithOutCategory(data); xyChartData.plots.push({ type: 'line', - strokeFill: '#00ff00', + strokeFill: + xyChartThemeConfig.xychartLinePlotPalette[ + Math.floor(Math.random() * (xyChartThemeConfig.xychartLinePlotPalette.length - 1)) + ], strokeWidth: 2, data: plotData, }); @@ -187,7 +213,9 @@ function setBarData(title: string, data: number[]) { const plotData = transformDataWithOutCategory(data); xyChartData.plots.push({ type: 'bar', - fill: '#0000bb', + fill: xyChartThemeConfig.xychartBarPlotPalette[ + Math.floor(Math.random() * (xyChartThemeConfig.xychartBarPlotPalette.length - 1)) + ], data: plotData, }); } @@ -197,7 +225,7 @@ function getDrawableElem(): DrawableElem[] { throw Error('No Plot to render, please provide a plot with some data'); } xyChartData.title = getDiagramTitle(); - return XYChartBuilder.build(xyChartConfig, xyChartData); + return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig); } function setHeight(height: number) { @@ -212,6 +240,7 @@ const clear = function () { commonClear(); xyChartConfig = getChartDefaultConfig(); xyChartData = getChartDefalutData(); + xyChartThemeConfig = getChartDefaultThemeConfig(); hasSetXAxis = false; hasSetYAxis = false; }; diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index 3cd6bca4f7..59362a54e5 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -272,6 +272,21 @@ class Theme { this.quadrantExternalBorderStrokeFill || this.primaryBorderColor; this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor; + /* xychart */ + this.xychartBackgroundColor = this.xychartBackgroundColor || this.background; + this.xychartTitleColor = this.xychartTitleColor || this.primaryTextColor; + this.xychartAxisLineColor = this.xychartAxisLineColor || this.primaryTextColor; + this.xychartXAxisTitleColor = this.xychartXAxisTitleColor || this.primaryTextColor; + this.xychartXAxisLableColor = this.xychartXAxisLableColor || this.primaryTextColor; + this.xychartXAxisTickColor = this.xychartXAxisTickColor || this.primaryTextColor; + this.xychartYAxisTitleColor = this.xychartYAxisTitleColor || this.primaryTextColor; + this.xychartYAxisLableColor = this.xychartYAxisLableColor || this.primaryTextColor; + this.xychartYAxisTickColor = this.xychartYAxisTickColor || this.primaryTextColor; + this.xychartBarPlotPalette = this.xychartBarPlotPalette || [this.primaryColor]; + this.xychartLinePlotPalette = this.xychartLinePlotPalette || [ + adjust(this.primaryColor, { r: -100, g: -100, b: -100 }), + ]; + /* requirement-diagram */ this.requirementBackground = this.requirementBackground || this.primaryColor; this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 53d735b021..2ab5d09a7d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,8 @@ -lockfileVersion: '6.0' +lockfileVersion: '6.1' + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false importers: From 6e98759ee77a63c34324a547858465304b672fa1 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Fri, 21 Jul 2023 22:42:46 +0530 Subject: [PATCH 020/126] Improve plot color selection --- demos/xychart.html | 6 ++- .../xychart/chartBuilder/Interfaces.ts | 3 +- .../chartBuilder/components/plot/BarPlot.ts | 8 +-- .../chartBuilder/components/plot/LinePlot.ts | 8 +-- .../chartBuilder/components/plot/index.ts | 6 +-- .../mermaid/src/diagrams/xychart/xychartDb.ts | 53 ++++++++++++++----- packages/mermaid/src/themes/theme-default.js | 5 +- 7 files changed, 59 insertions(+), 30 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index ea24e4872f..3d0da3fb3d 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -40,7 +40,11 @@ <h1>XY Charts demos</h1> <h1>XY Charts demos</h1> <pre class="mermaid"> xychart-beta - line [23, 46, 75, 43] + line [23, 46, 77, 34] + line [45, 32, 33, 12] + line [87, 54, 99, 85] + line [78, 88, 22, 4] + line [22, 29, 75, 33] bar "sample bat" [52, 96, 35, 10] </pre> diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 6968dee480..ce7e33e8bf 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -13,8 +13,7 @@ export interface XYChartThemeConfig { xychartYAxisLableColor: string; xychartYAxisTitleColor: string; xychartYAxisTickColor: string; - xychartBarPlotPalette: string[]; - xychartLinePlotPalette: string[]; + xychartPlotBaseColor: string; } export interface ChartComponent { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index b11a6630b1..7308adde11 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,5 +1,5 @@ import { XYChartConfig } from '../../../../../config.type.js'; -import { BarPlotData, BoundingRect, DrawableElem, XYChartThemeConfig } from '../../Interfaces.js'; +import { BarPlotData, BoundingRect, DrawableElem } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; export class BarPlot { @@ -9,7 +9,7 @@ export class BarPlot { private xAxis: IAxis, private yAxis: IAxis, private orientation: XYChartConfig['chartOrientation'], - private chartThemeConfig: XYChartThemeConfig + private plotIndex: number ) {} getDrawableElement(): DrawableElem[] { @@ -28,7 +28,7 @@ export class BarPlot { if (this.orientation === 'horizontal') { return [ { - groupTexts: ['plot', 'bar-plot'], + groupTexts: ['plot', `bar-plot-${this.plotIndex}`], type: 'rect', data: finalData.map((data) => ({ x: this.boundingRect.x, @@ -44,7 +44,7 @@ export class BarPlot { } else { return [ { - groupTexts: ['plot', 'bar-plot'], + groupTexts: ['plot', `bar-plot-${this.plotIndex}`], type: 'rect', data: finalData.map((data) => ({ x: data[0] - barWidthHalf, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index c10b431a7a..cd1533b1e6 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -1,7 +1,7 @@ import { line } from 'd3'; -import { DrawableElem, LinePlotData, XYChartThemeConfig } from '../../Interfaces.js'; -import { IAxis } from '../axis/index.js'; import { XYChartConfig } from '../../../../../config.type.js'; +import { DrawableElem, LinePlotData } from '../../Interfaces.js'; +import { IAxis } from '../axis/index.js'; export class LinePlot { constructor( @@ -9,7 +9,7 @@ export class LinePlot { private xAxis: IAxis, private yAxis: IAxis, private orientation: XYChartConfig['chartOrientation'], - private chartThemeConfig: XYChartThemeConfig + private plotIndex: number ) {} getDrawableElement(): DrawableElem[] { @@ -33,7 +33,7 @@ export class LinePlot { } return [ { - groupTexts: ['plot', 'line-plot'], + groupTexts: ['plot', `line-plot-${this.plotIndex}`], type: 'path', data: [ { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 9e0f3cbb0d..bb3b90bc7c 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -62,7 +62,7 @@ export class Plot implements IPlot { this.chartThemeConfig ).getDrawableElement(), ]; - for (const plot of this.chartData.plots) { + for (const [i, plot] of this.chartData.plots.entries()) { switch (plot.type) { case 'line': { @@ -71,7 +71,7 @@ export class Plot implements IPlot { this.xAxis, this.yAxis, this.chartConfig.chartOrientation, - this.chartThemeConfig + i ); drawableElem.push(...linePlot.getDrawableElement()); } @@ -84,7 +84,7 @@ export class Plot implements IPlot { this.xAxis, this.yAxis, this.chartConfig.chartOrientation, - this.chartThemeConfig + i ); drawableElem.push(...barPlot.getDrawableElement()); } diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index d70039f3a9..a818037f32 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -1,4 +1,5 @@ -import { log } from '../../logger.js'; +// @ts-ignore: TODO Fix ts errors +import { adjust, channel, toHsla, isDark, lighten, darken } from 'khroma'; import mermaidAPI from '../../mermaidAPI.js'; import * as configApi from '../../config.js'; import { sanitizeText } from '../common/common.js'; @@ -27,6 +28,24 @@ const defaultThemeVariables = getThemeVariables(); const config = configApi.getConfig(); +function plotColorPaletteGenerator(baseColor: string, noOfColorNeeded = 15): string[] { + const colors = []; + const MAX_HUE_VALUE = 360; + const baseHue = channel(baseColor, 'h'); + if (baseHue > MAX_HUE_VALUE / 2) { + const decr = Math.floor(baseHue / noOfColorNeeded); + for (let i = 0; i <= baseHue; i += decr) { + colors.push(adjust(baseColor, { h: -i })); + } + } else { + const incr = Math.floor((MAX_HUE_VALUE - baseHue) / noOfColorNeeded); + for (let i = 0; i <= baseHue; i += incr) { + colors.push(adjust(baseColor, { h: i })); + } + } + return colors; +} + function getChartDefaultThemeConfig(): XYChartThemeConfig { return { xychartTitleColor: @@ -45,10 +64,8 @@ function getChartDefaultThemeConfig(): XYChartThemeConfig { config.themeVariables?.xychartYAxisTitleColor || defaultThemeVariables.xychartYAxisTitleColor, xychartYAxisTickColor: config.themeVariables?.xychartYAxisTickColor || defaultThemeVariables.xychartYAxisTickColor, - xychartBarPlotPalette: - config.themeVariables?.xychartBarPlotPalette || defaultThemeVariables.xychartBarPlotPalette, - xychartLinePlotPalette: - config.themeVariables?.xychartLinePlotPalette || defaultThemeVariables.xychartLinePlotPalette, + xychartPlotBaseColor: + config.themeVariables?.xychartPlotBaseColor || defaultThemeVariables.xychartPlotBaseColor, }; } function getChartDefaultConfig(): XYChartConfig { @@ -110,6 +127,9 @@ function getChartDefalutData(): XYChartData { let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); let xyChartData: XYChartData = getChartDefalutData(); +let plotColorPalette = Array.isArray(xyChartThemeConfig.xychartPlotBaseColor) + ? xyChartThemeConfig.xychartPlotBaseColor + : plotColorPaletteGenerator(xyChartThemeConfig.xychartPlotBaseColor); let hasSetXAxis = false; let hasSetYAxis = false; @@ -197,27 +217,32 @@ function transformDataWithOutCategory(data: number[]): SimplePlotDataType { return retData; } + +let plotIndex = 0; + +function getPlotColorFromPalette(plotIndex: number): string { + return plotColorPalette[plotIndex === 0 ? 0 : plotIndex % (plotColorPalette.length - 1)]; +} + function setLineData(title: string, data: number[]) { const plotData = transformDataWithOutCategory(data); xyChartData.plots.push({ type: 'line', - strokeFill: - xyChartThemeConfig.xychartLinePlotPalette[ - Math.floor(Math.random() * (xyChartThemeConfig.xychartLinePlotPalette.length - 1)) - ], + strokeFill: getPlotColorFromPalette(plotIndex), strokeWidth: 2, data: plotData, }); + plotIndex++; } + function setBarData(title: string, data: number[]) { const plotData = transformDataWithOutCategory(data); xyChartData.plots.push({ type: 'bar', - fill: xyChartThemeConfig.xychartBarPlotPalette[ - Math.floor(Math.random() * (xyChartThemeConfig.xychartBarPlotPalette.length - 1)) - ], + fill: getPlotColorFromPalette(plotIndex), data: plotData, }); + plotIndex++; } function getDrawableElem(): DrawableElem[] { @@ -238,9 +263,13 @@ function setWidth(width: number) { const clear = function () { commonClear(); + plotIndex = 0; xyChartConfig = getChartDefaultConfig(); xyChartData = getChartDefalutData(); xyChartThemeConfig = getChartDefaultThemeConfig(); + plotColorPalette = Array.isArray(xyChartThemeConfig.xychartPlotBaseColor) + ? xyChartThemeConfig.xychartPlotBaseColor + : plotColorPaletteGenerator(xyChartThemeConfig.xychartPlotBaseColor); hasSetXAxis = false; hasSetYAxis = false; }; diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index 59362a54e5..b274a4562e 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -282,10 +282,7 @@ class Theme { this.xychartYAxisTitleColor = this.xychartYAxisTitleColor || this.primaryTextColor; this.xychartYAxisLableColor = this.xychartYAxisLableColor || this.primaryTextColor; this.xychartYAxisTickColor = this.xychartYAxisTickColor || this.primaryTextColor; - this.xychartBarPlotPalette = this.xychartBarPlotPalette || [this.primaryColor]; - this.xychartLinePlotPalette = this.xychartLinePlotPalette || [ - adjust(this.primaryColor, { r: -100, g: -100, b: -100 }), - ]; + this.xychartPlotBaseColor = this.xychartPlotBaseColor || darken(this.primaryColor, 25); /* requirement-diagram */ this.requirementBackground = this.requirementBackground || this.primaryColor; From 6c2faf0bda7a3eaeb8f823a83e5a16588ea2bb1c Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 6 Aug 2023 15:45:01 +0530 Subject: [PATCH 021/126] Simplified the jison file --- .../src/diagrams/xychart/parser/xychart.jison | 165 +++++-------- .../xychart/parser/xychart.jison.spec.ts | 216 ++++++++++++++---- .../mermaid/src/diagrams/xychart/xychartDb.ts | 23 +- 3 files changed, 244 insertions(+), 160 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 1ecd6edf4f..743647df7d 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -1,7 +1,6 @@ %lex %options case-insensitive -%x string %x string %x md_string %x title @@ -12,24 +11,9 @@ %x acc_title %x acc_descr %x acc_descr_multiline -%x chart_config -%x chart_orientation -%x x_axis -%x y_axis -%x axis_title -%x axis_data -%x axis_data_band -%x axis_data_band_capture -%x line -%x line_title -%x line_data -%x line_data_entries -%x line_data_without_label -%x bar_data_without_label -%x bar -%x bar_title -%x bar_data -%x bar_data_entries +%s axis_data +%s data +%s data_inner %% \%\%\{ { this.begin('open_directive'); return 'open_directive'; } <open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } @@ -38,63 +22,38 @@ <arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive'; \%\%(?!\{)[^\n]* /* skip comments */ [^\}]\%\%[^\n]* /* skip comments */ +<axis_data>(\r?\n) { this.popState(); return 'NEWLINE'; } +<data>(\r?\n) { this.popState(); return 'NEWLINE'; } [\n\r]+ return 'NEWLINE'; \%\%[^\n]* /* do nothing */ -title { this.begin("title");return 'title'; } +title { this.begin("title"); return 'title'; } <title>(?!\n|;|#)*[^\n]* { this.popState(); return "title_value"; } + accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; } <acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; } accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; } <acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} <acc_descr_multiline>[\}] { this.popState(); } -<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value"; - -" "*"xychart-beta" {this.begin("chart_config"); return 'XYCHART';} -<chart_config>" "+("vertical"|"horizontal") {this.begin("chart_orientation"); return 'chart_orientation';} -<chart_orientation>[\s]* {this.popState(); this.popState(); return 'CHART_CONFIG_END';} -<chart_config>[\s]* {this.popState(); return 'CHART_CONFIG_END';} - -"x-axis"" "* { this.begin("x_axis"); return "X_AXIS";} -"y-axis"" "* { this.begin("y_axis"); return "Y_AXIS";} -<x_axis,y_axis>["] {this.begin("axis_title");} -<axis_title>[^"]+ {return 'AXIS_TITLE';} -<axis_title>["]" "*(\r?\n) {this.popState(); this.popState();} -<axis_title>["]" "* {this.popState(); this.begin("axis_data");} -<x_axis,y_axis>[^\s]+" "*(\r?\n) {this.popState(); return 'AXIS_TITLE';} -<x_axis,y_axis>[^\s]+" "* {this.begin("axis_data"); return 'AXIS_TITLE'; } - -<axis_data>[+-]?\d+(?:\.\d+)?" "*"-->"" "*[+-]?\d+(?:\.\d+)?" "* { return 'AXIS_RANGE_DATA';} - -<axis_data>[\[]" "* {this.begin("axis_data_band"), this.begin("axis_data_band_capture")} -<axis_data_band_capture>(["][^",]+["]|[^\s\"\,]]+)" "*([,]" "*(["][^",]+["]|[^\s\]",]+)" "*)* { this.popState(); return "AXIS_BAND_DATA"; } -<axis_data_band>[\]]" "* {this.popState(); return "AXIS_BAND_DATA_END"} -<axis_data>[\s]+ {this.popState(); this.popState();} - - -"line"" "* {this.begin("line"); return 'LINE';} -<line>["] {this.begin("line_title");} -<line_title>[^"]+ {return 'LINE_TITLE';} -<line_title>["]" "* {this.popState(); this.begin("line_data");} -<line_data>"["" "* {this.begin('line_data_entries');} -<line_data_without_label,line_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'LINE_DATA'} -<line_data_entries>"]"" "* {this.popState(); this.popState(); this.popState()} -<line_data_without_label>"]"" "* {this.popState(); this.popState()} -<line>[^\s\[]+" "* {this.begin("line_data"); return 'LINE_TITLE';} -<line>"["" "* {this.begin('line_data_without_label');} - -"bar"" "* {this.begin("bar"); return 'BAR';} -<bar>["] {this.begin("bar_title");} -<bar_title>[^"]+ {return 'BAR_TITLE';} -<bar_title>["]" "* {this.popState(); this.begin("bar_data");} -<bar_data>"["" "* {this.begin('bar_data_entries');} -<bar_data_without_label,bar_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'BAR_DATA'} -<bar_data_entries>"]"" "* {this.popState(); this.popState(); this.popState()} -<bar_data_without_label>"]"" "* {this.popState(); this.popState()} -<bar>[^\s\[]+" "* {this.begin("bar_data"); return 'BAR_TITLE';} -<bar>"["" "* {this.begin('bar_data_without_label');} +<acc_descr_multiline>[^\}]* { return "acc_descr_multiline_value"; } + +"xychart-beta" {return 'XYCHART';} +("vertical"|"horizontal") {return 'CHART_ORIENTATION'} + +"x-axis" { this.begin("axis_data"); return "X_AXIS"; } +"y-axis" { this.begin("axis_data"); return "Y_AXIS"; } +<axis_data>[\[] { this.popState(); return 'SQUARE_BRACES_START'; } +<axis_data>[+-]?\d+(?:\.\d+)? { return 'NUMBER_WITH_DECIMAL'; } +<axis_data>"-->" { return 'ARROW_DELIMITER'; } + + +"line" { this.begin("data"); return 'LINE'; } +"bar" { this.begin("data"); return 'BAR'; } +<data>[\[] { this.popState(); this.begin("data_inner"); return 'SQUARE_BRACES_START'; } +<data_inner>[+-]?\d+(?:\.\d+)? { return 'NUMBER_WITH_DECIMAL';} +<data_inner>[\]] { this.popState(); return 'SQUARE_BRACES_END'; } @@ -106,6 +65,9 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} <string>["] this.popState(); <string>[^"]* return "STR"; + +[\[] return 'SQUARE_BRACES_START' +[\]] return 'SQUARE_BRACES_END' [A-Za-z]+ return 'ALPHA'; ":" return 'COLON'; \+ return 'PLUS'; @@ -119,7 +81,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} "&" return 'AMP'; \- return 'MINUS'; [0-9]+ return 'NUM'; -\s return 'SPACE'; +\s /* skip */ ";" return 'SEMI'; [!"#$%&'*+,-.`?\\_/] return 'PUNCTUATION'; <<EOF>> return 'EOF'; @@ -132,60 +94,63 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} start : eol start - | SPACE start | directive start - | XYCHART chartConfig CHART_CONFIG_END document - | XYCHART CHART_CONFIG_END document + | XYCHART chartConfig start + | XYCHART start + | document ; chartConfig - : chart_orientation {yy.setOrientation($1.trim());} + : CHART_ORIENTATION { yy.setOrientation($1); } ; document : /* empty */ - | document line + | document statement ; line - : statement eol + : statement ; statement - : - | SPACE statement - | directive - | title title_value { $$=$2.trim();yy.setDiagramTitle($$); } + : statement eol + | title title_value { yy.setDiagramTitle($title_value.trim()); } | X_AXIS parseXAxis | Y_AXIS parseYAxis - | parseLine - | parseBar + | LINE parseLineData { yy.setLineData({text: '', type: 'text'}, $parseLineData); } + | LINE text parseLineData { yy.setLineData($text, $parseLineData); } + | BAR parseBarData { yy.setBarData({text: '', type: 'text'}, $parseBarData); } + | BAR text parseBarData { yy.setBarData($text, $parseBarData); } ; -parseLine - : LINE LINE_DATA {yy.setLineData('', $2.split(',').map(d => Number(d.trim())));} - | LINE LINE_TITLE LINE_DATA {yy.setLineData($2.trim(), $3.split(',').map(d => Number(d.trim())));} +parseLineData + : SQUARE_BRACES_START NUMBER_WITH_DECIMAL parseLineData {$parseLineData.unshift(Number($NUMBER_WITH_DECIMAL)); $$ = $parseLineData} + | COMMA NUMBER_WITH_DECIMAL parseLineData {$parseLineData.unshift(Number($NUMBER_WITH_DECIMAL)); $$ = $parseLineData;} + | SQUARE_BRACES_END {$$ = []} ; -parseBar - : BAR BAR_DATA {yy.setBarData('', $2.split(',').map(d => Number(d.trim())));} - | BAR BAR_TITLE BAR_DATA {yy.setBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));} +parseBarData + : SQUARE_BRACES_START NUMBER_WITH_DECIMAL parseBarData {$parseBarData.unshift(Number($NUMBER_WITH_DECIMAL)); $$ = $parseBarData} + | COMMA NUMBER_WITH_DECIMAL parseBarData {$parseBarData.unshift(Number($NUMBER_WITH_DECIMAL)); $$ = $parseBarData;} + | SQUARE_BRACES_END {$$ = []} ; parseXAxis - : AXIS_TITLE statement {yy.setXAxisTitle($1.trim());} - | AXIS_TITLE xAxisBandData statement {yy.setXAxisTitle($1.trim());} - | AXIS_TITLE AXIS_RANGE_DATA statement {yy.setXAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setXAxisRangeData(Number($$[0]), Number($$[1]));} + : text {yy.setXAxisTitle($text);} + | text xAxisBandData {yy.setXAxisTitle($text); yy.setXAxisBand($xAxisBandData);} + | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setXAxisTitle($text); yy.setXAxisRangeData(Number($2), Number($4));} ; xAxisBandData - : AXIS_BAND_DATA xAxisBandData {yy.setXAxisBand($1.split(',').map(d => { let m = d.trim().match(/^(?:["]([^"]+)["]|([^\s"]+))$/); return m ? m[1] || m[2] : "";}));} - | AXIS_BAND_DATA_END + : SQUARE_BRACES_START text xAxisBandData {$xAxisBandData.unshift($text); $$ = $xAxisBandData} + | COMMA text xAxisBandData {$xAxisBandData.unshift($text); $$ = $xAxisBandData;} + | SQUARE_BRACES_END {$$ = []} ; parseYAxis - : AXIS_TITLE statement {yy.setYAxisTitle($1.trim());} - | AXIS_TITLE AXIS_RANGE_DATA statement {yy.setYAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setYAxisRangeData(Number($$[0]), Number($$[1]));} + : text {yy.setYAxisTitle($text);} + | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setYAxisTitle($text); yy.setYAxisRangeData(Number($2), Number($4));} ; directive @@ -215,26 +180,22 @@ closeDirective : close_directive { yy.parseDirective('}%%', 'close_directive', 'xychart'); } ; -text: alphaNumToken - { $$={text:$1, type: 'text'};} - | text textNoTagsToken - { $$={text:$1.text+''+$2, type: $1.type};} +text: alphaNum + { $$={text:$alphaNum, type: 'text'};} | STR - { $$={text: $1, type: 'text'};} + { $$={text: $STR, type: 'text'};} | MD_STR - { $$={text: $1, type: 'markdown'};} + { $$={text: $MD_STR, type: 'markdown'};} ; alphaNum : alphaNumToken - {$$=$1;} + {$$=$alphaNumToken;} | alphaNum alphaNumToken - {$$=$1+''+$2;} + {$$=$alphaNum+''+$alphaNumToken;} ; -alphaNumToken : PUNCTUATION | AMP | NUM| ALPHA | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ; - -textNoTagsToken: alphaNumToken | SPACE | MINUS; +alphaNumToken : PUNCTUATION | AMP | NUM | ALPHA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ; %% diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 6057931108..24c6f2891a 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -80,106 +80,190 @@ describe('Testing xychart jison file', () => { it('parse x-axis', () => { let str = 'xychart-beta \nx-axis xAxisName\n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: 'xAxisName', + type: 'text', + }); clearMocks(); str = 'xychart-beta \nx-axis xAxisName \n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: 'xAxisName', + type: 'text', + }); clearMocks(); str = 'xychart-beta \n x-axis "xAxisName has space"\n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName has space'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: 'xAxisName has space', + type: 'text', + }); clearMocks(); str = 'xychart-beta \n x-axis " xAxisName has space " \n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName has space'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: ' xAxisName has space ', + type: 'text', + }); clearMocks(); str = 'xychart-beta \nx-axis xAxisName 45.5 --> 33 \n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: 'xAxisName', + type: 'text', + }); expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 33); clearMocks(); - str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2 ] \n '; + str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] \n '; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.setXAxisBand).toHaveBeenCalledWith(['cat1', 'cat2']); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: 'xAxisName', + type: 'text', + }); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ + { + text: 'cat1', + type: 'text', + }, + { text: 'cat2a', type: 'text' }, + ]); clearMocks(); 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.setXAxisTitle).toHaveBeenCalledWith({ text: 'this is x axis', type: 'text' }); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ + { text: 'category1', type: 'text' }, + { text: 'category 2', type: 'text' }, + { text: 'category3', type: 'text' }, + ]); 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.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ + { text: 'cat1 with space', type: 'text' }, + { text: 'cat2', type: 'text' }, + { text: 'cat3', type: 'text' }, + ]); clearMocks(); str = 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 asdf , cat3] \n '; - expect(parserFnConstructor(str)).toThrow(); + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ + { text: 'cat1 with space', type: 'text' }, + { text: 'cat2asdf', type: 'text' }, + { text: 'cat3', type: 'text' }, + ]); }); it('parse y-axis', () => { let str = 'xychart-beta \ny-axis yAxisName\n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); clearMocks(); str = 'xychart-beta \ny-axis yAxisName \n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); clearMocks(); str = 'xychart-beta \n y-axis "yAxisName has space"\n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName has space'); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ + text: 'yAxisName has space', + type: 'text', + }); clearMocks(); str = 'xychart-beta \n y-axis " yAxisName has space " \n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName has space'); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ + text: ' yAxisName has space ', + type: 'text', + }); clearMocks(); str = 'xychart-beta \ny-axis yAxisName 45.5 --> 33 \n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33); + + clearMocks(); + + str = 'xychart-beta \ny-axis yAxisName [ 45.3, 33 ] \n'; + expect(parserFnConstructor(str)).toThrow(); + + clearMocks(); + + str = 'xychart-beta \ny-axis yAxisName\n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + }); + it('parse both axis', () => { + let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + + clearMocks(); + + str = 'xychart-beta \nx-axis xAxisName\n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: 'xAxisName', + type: 'text', + }); + + clearMocks(); + + str = 'xychart-beta \ny-axis yAxisName'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + + clearMocks(); }); it('parse line Data', () => { let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line lineTitle [23, 45, 56.6]'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle', [23, 45, 56.6]); + expect(mockDB.setLineData).toHaveBeenCalledWith( + { text: 'lineTitle', type: 'text' }, + [23, 45, 56.6] + ); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); clearMocks(); str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -45 , 56.6 ] '; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle with space', [23, -45, 56.6]); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setLineData).toHaveBeenCalledWith( + { text: 'lineTitle with space', type: 'text' }, + [23, -45, 56.6] + ); // set line data without title 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'); - expect(mockDB.setLineData).toHaveBeenCalledWith('', [23, -45, 56.6]); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setLineData).toHaveBeenCalledWith({ text: '', type: 'text' }, [23, -45, 56.6]); clearMocks(); str = @@ -189,26 +273,32 @@ describe('Testing xychart jison file', () => { it('parse bar Data', () => { let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle [23, 45, 56.6]'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle', [23, 45, 56.6]); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setBarData).toHaveBeenCalledWith( + { text: 'barTitle', type: 'text' }, + [23, 45, 56.6] + ); clearMocks(); str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -45 , 56.6 ] '; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle with space', [23, -45, 56.6]); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setBarData).toHaveBeenCalledWith( + { text: 'barTitle with space', type: 'text' }, + [23, -45, 56.6] + ); clearMocks(); // set bar data without title 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'); - expect(mockDB.setBarData).toHaveBeenCalledWith('', [23, -45, 56.6]); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setBarData).toHaveBeenCalledWith({ text: '', type: 'text' }, [23, -45, 56.6]); clearMocks(); str = @@ -219,12 +309,24 @@ describe('Testing xychart jison file', () => { let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle1 [23, 45, 56.6] \n line lineTitle1 [11, 45.5, 67, 23] \n bar barTitle2 [13, 42, 56.89] \n line lineTitle2 [45, 99, 012]'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - 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]); - expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle2', [45, 99, 12]); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setBarData).toHaveBeenCalledWith( + { text: 'barTitle1', type: 'text' }, + [23, 45, 56.6] + ); + expect(mockDB.setBarData).toHaveBeenCalledWith( + { text: 'barTitle2', type: 'text' }, + [13, 42, 56.89] + ); + expect(mockDB.setLineData).toHaveBeenCalledWith( + { text: 'lineTitle1', type: 'text' }, + [11, 45.5, 67, 23] + ); + expect(mockDB.setLineData).toHaveBeenCalledWith( + { text: 'lineTitle2', type: 'text' }, + [45, 99, 12] + ); clearMocks(); str = ` @@ -237,13 +339,29 @@ describe('Testing xychart jison file', () => { bar barTitle2 [13, 42, 56.89] line lineTitle2 [45, 99, 012]`; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yaxisText'); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yaxisText', type: 'text' }); expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(10, 150); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('this is x axis'); - 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]); - expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle2', [45, 99, 12]); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'this is x axis', type: 'text' }); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ + { text: 'category1', type: 'text' }, + { text: 'category 2', type: 'text' }, + { text: 'category3', type: 'text' }, + ]); + expect(mockDB.setBarData).toHaveBeenCalledWith( + { text: 'barTitle1', type: 'text' }, + [23, 45, 56.6] + ); + expect(mockDB.setBarData).toHaveBeenCalledWith( + { text: 'barTitle2', type: 'text' }, + [13, 42, 56.89] + ); + expect(mockDB.setLineData).toHaveBeenCalledWith( + { text: 'lineTitle1', type: 'text' }, + [11, 45.5, 67, 23] + ); + expect(mockDB.setLineData).toHaveBeenCalledWith( + { text: 'lineTitle2', type: 'text' }, + [45, 99, 12] + ); }); }); diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index a818037f32..8f1e80e61b 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -1,5 +1,5 @@ // @ts-ignore: TODO Fix ts errors -import { adjust, channel, toHsla, isDark, lighten, darken } from 'khroma'; +import { adjust, channel } from 'khroma'; import mermaidAPI from '../../mermaidAPI.js'; import * as configApi from '../../config.js'; import { sanitizeText } from '../common/common.js'; @@ -133,6 +133,11 @@ let plotColorPalette = Array.isArray(xyChartThemeConfig.xychartPlotBaseColor) let hasSetXAxis = false; let hasSetYAxis = false; +interface NormalTextType { + type: 'text'; + text: string; +} + function textSanitizer(text: string) { return sanitizeText(text.trim(), config); } @@ -149,23 +154,23 @@ function setOrientation(oriantation: string) { xyChartConfig.chartOrientation = 'vertical'; } } -function setXAxisTitle(title: string) { - xyChartData.xAxis.title = textSanitizer(title); +function setXAxisTitle(title: NormalTextType) { + xyChartData.xAxis.title = textSanitizer(title.text); } function setXAxisRangeData(min: number, max: number) { xyChartData.xAxis = { type: 'linear', title: xyChartData.xAxis.title, min, max }; hasSetXAxis = true; } -function setXAxisBand(categories: string[]) { +function setXAxisBand(categories: NormalTextType[]) { xyChartData.xAxis = { type: 'band', title: xyChartData.xAxis.title, - categories: categories.map((c) => textSanitizer(c)), + categories: categories.map((c) => textSanitizer(c.text)), }; hasSetXAxis = true; } -function setYAxisTitle(title: string) { - xyChartData.yAxis.title = textSanitizer(title); +function setYAxisTitle(title: NormalTextType) { + xyChartData.yAxis.title = textSanitizer(title.text); } function setYAxisRangeData(min: number, max: number) { xyChartData.yAxis = { type: 'linear', title: xyChartData.yAxis.title, min, max }; @@ -224,7 +229,7 @@ function getPlotColorFromPalette(plotIndex: number): string { return plotColorPalette[plotIndex === 0 ? 0 : plotIndex % (plotColorPalette.length - 1)]; } -function setLineData(title: string, data: number[]) { +function setLineData(title: NormalTextType, data: number[]) { const plotData = transformDataWithOutCategory(data); xyChartData.plots.push({ type: 'line', @@ -235,7 +240,7 @@ function setLineData(title: string, data: number[]) { plotIndex++; } -function setBarData(title: string, data: number[]) { +function setBarData(title: NormalTextType, data: number[]) { const plotData = transformDataWithOutCategory(data); xyChartData.plots.push({ type: 'bar', From 526de36c869c75b8688fe64fb99943213702dacf Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 13 Aug 2023 22:56:50 +0530 Subject: [PATCH 022/126] Updated code to use latest config system --- .vite/jsonSchemaPlugin.ts | 1 + docs/config/setup/modules/defaultConfig.md | 2 +- .../scripts/create-types-from-json-schema.mts | 1 + packages/mermaid/src/config.type.ts | 191 +++++++++++++++--- packages/mermaid/src/defaultConfig.ts | 4 + .../xychart/chartBuilder/Interfaces.ts | 48 ++++- .../xychart/chartBuilder/Orchestrator.ts | 21 +- .../chartBuilder/components/ChartTitle.ts | 6 +- .../chartBuilder/components/axis/BandAxis.ts | 3 +- .../chartBuilder/components/axis/BaseAxis.ts | 14 +- .../components/axis/LinearAxis.ts | 3 +- .../chartBuilder/components/axis/index.ts | 2 +- .../chartBuilder/components/plot/BarPlot.ts | 3 +- .../chartBuilder/components/plot/LinePlot.ts | 3 +- .../components/plot/PlotBorder.ts | 7 +- .../chartBuilder/components/plot/index.ts | 2 +- .../diagrams/xychart/chartBuilder/index.ts | 4 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 108 +++++----- .../mermaid/src/schemas/config.schema.yaml | 128 ++++++++++++ packages/mermaid/src/themes/theme-default.js | 22 +- 20 files changed, 433 insertions(+), 140 deletions(-) diff --git a/.vite/jsonSchemaPlugin.ts b/.vite/jsonSchemaPlugin.ts index 671a9612e8..ad3d9863dc 100644 --- a/.vite/jsonSchemaPlugin.ts +++ b/.vite/jsonSchemaPlugin.ts @@ -18,6 +18,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [ 'er', 'pie', 'quadrantChart', + 'xyChart', 'requirement', 'mindmap', 'timeline', diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index a55ec18085..93b0459c6c 100644 --- a/docs/config/setup/modules/defaultConfig.md +++ b/docs/config/setup/modules/defaultConfig.md @@ -14,7 +14,7 @@ #### Defined in -[defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266) +[defaultConfig.ts:270](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L270) --- diff --git a/packages/mermaid/scripts/create-types-from-json-schema.mts b/packages/mermaid/scripts/create-types-from-json-schema.mts index e81ea70ffd..e6a273bfb1 100644 --- a/packages/mermaid/scripts/create-types-from-json-schema.mts +++ b/packages/mermaid/scripts/create-types-from-json-schema.mts @@ -46,6 +46,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [ 'er', 'pie', 'quadrantChart', + 'xyChart', 'requirement', 'mindmap', 'timeline', diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 4a392673d9..3548f0223f 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -704,33 +704,178 @@ export interface QuadrantChartConfig extends BaseDiagramConfig { */ quadrantExternalBorderStrokeWidth?: number; } - +/** + * This object contains configuration for XYChart axis config + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "XYChartAxisConfig". + */ export interface XYChartAxisConfig { - showLabel: boolean; - labelFontSize: number; - lablePadding: number; - showTitle: boolean; - titleFontSize: number; - titlePadding: number; - showTick: boolean; - tickLength: number; - tickWidth: number; + /** + * Should show the axis labels (tick text) + */ + showLabel?: boolean; + /** + * font size of the axis labels (tick text) + */ + labelFontSize?: number; + /** + * top and bottom space from axis label (tick text) + */ + labelPadding?: number; + /** + * Should show the axis title + */ + showTitle?: boolean; + /** + * font size of the axis title + */ + titleFontSize?: number; + /** + * top and bottom space from axis title + */ + titlePadding?: number; + /** + * Should show the axis tick lines + */ + showTick?: boolean; + /** + * length of the axis tick lines + */ + tickLength?: number; + /** + * width of the axis tick lines + */ + tickWidth?: number; } - +/** + * This object contains configuration specific to XYCharts + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "XYChartConfig". + */ export interface XYChartConfig extends BaseDiagramConfig { - width: number; - height: number; - fontFamily: string; - titleFontSize: number; - titlePadding: number; - showtitle: boolean; - xAxis: XYChartAxisConfig; - yAxis: XYChartAxisConfig; - plotBorderWidth: number; - chartOrientation: 'vertical' | 'horizontal'; - plotReservedSpacePercent: number; + /** + * width of the chart + */ + width?: number; + /** + * height of the chart + */ + height?: number; + /** + * Font family of texts in the xyChart + */ + fontFamily?: string; + /** + * Font size of the chart title + */ + titleFontSize?: number; + /** + * Top and bottom space from the chart title + */ + titlePadding?: number; + /** + * Should show the chart title + */ + showTitle?: boolean; + xAxis?: XYChartAxisConfig1; + yAxis?: XYChartAxisConfig2; + /** + * width of the line around the plot of the chart + */ + plotBorderWidth?: number; + /** + * How to plot will be drawn horizontal or vertical + */ + chartOrientation?: 'vertical' | 'horizontal'; + /** + * Minimum percent of space plots of the chart will take + */ + plotReservedSpacePercent?: number; +} +/** + * This object contains configuration for XYChart axis config + */ +export interface XYChartAxisConfig1 { + /** + * Should show the axis labels (tick text) + */ + showLabel?: boolean; + /** + * font size of the axis labels (tick text) + */ + labelFontSize?: number; + /** + * top and bottom space from axis label (tick text) + */ + labelPadding?: number; + /** + * Should show the axis title + */ + showTitle?: boolean; + /** + * font size of the axis title + */ + titleFontSize?: number; + /** + * top and bottom space from axis title + */ + titlePadding?: number; + /** + * Should show the axis tick lines + */ + showTick?: boolean; + /** + * length of the axis tick lines + */ + tickLength?: number; + /** + * width of the axis tick lines + */ + tickWidth?: number; +} +/** + * This object contains configuration for XYChart axis config + */ +export interface XYChartAxisConfig2 { + /** + * Should show the axis labels (tick text) + */ + showLabel?: boolean; + /** + * font size of the axis labels (tick text) + */ + labelFontSize?: number; + /** + * top and bottom space from axis label (tick text) + */ + labelPadding?: number; + /** + * Should show the axis title + */ + showTitle?: boolean; + /** + * font size of the axis title + */ + titleFontSize?: number; + /** + * top and bottom space from axis title + */ + titlePadding?: number; + /** + * Should show the axis tick lines + */ + showTick?: boolean; + /** + * length of the axis tick lines + */ + tickLength?: number; + /** + * width of the axis tick lines + */ + tickWidth?: number; } - /** * The object containing configurations specific for entity relationship diagrams * diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index 62b361cff4..9681534736 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -234,6 +234,10 @@ const config: Partial<MermaidConfig> = { ...defaultConfigJson.pie, useWidth: undefined, }, + xyChart: { + ...defaultConfigJson.xyChart, + useWidth: undefined, + }, requirement: { ...defaultConfigJson.requirement, useWidth: undefined, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index ce7e33e8bf..843e02675c 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -5,15 +5,15 @@ export interface XYChartAxisThemeConfig { } export interface XYChartThemeConfig { - xychartTitleColor: string; - xychartAxisLineColor: string; - xychartXAxisLableColor: string; - xychartXAxisTitleColor: string; - xychartXAxisTickColor: string; - xychartYAxisLableColor: string; - xychartYAxisTitleColor: string; - xychartYAxisTickColor: string; - xychartPlotBaseColor: string; + titleColor: string; + axisLineColor: string; + xAxisLableColor: string; + xAxisTitleColor: string; + xAxisTickColor: string; + yAxisLableColor: string; + yAxisTitleColor: string; + yAxisTickColor: string; + plotBaseColor: string; } export interface ChartComponent { @@ -66,6 +66,36 @@ export function isLinearAxisData(data: AxisDataType): data is LinearAxisDataType return data.type === 'linear'; } +/** + * For now we are keeping this configs as we are removing the required fields while generating the config.type.ts file + * we should remove `XYChartAxisConfig` and `XYChartConfig` after we started using required fields + */ +export interface XYChartAxisConfig { + showLabel: boolean; + labelFontSize: number; + labelPadding: number; + showTitle: boolean; + titleFontSize: number; + titlePadding: number; + showTick: boolean; + tickLength: number; + tickWidth: number; +} + +export interface XYChartConfig { + width: number; + height: number; + fontFamily: string; + titleFontSize: number; + titlePadding: number; + showTitle: boolean; + xAxis: XYChartAxisConfig; + yAxis: XYChartAxisConfig; + plotBorderWidth: number; + chartOrientation: 'vertical' | 'horizontal'; + plotReservedSpacePercent: number; +} + export interface XYChartData { xAxis: AxisDataType; yAxis: AxisDataType; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index d4c80b5597..1386f53cdc 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,10 +1,15 @@ import { log } from '../../../logger.js'; -import { DrawableElem, XYChartData, XYChartThemeConfig, isBarPlot } from './Interfaces.js'; +import { + DrawableElem, + XYChartData, + XYChartThemeConfig, + XYChartConfig, + isBarPlot, +} from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; import { ChartComponent } from './Interfaces.js'; import { IAxis, getAxis } from './components/axis/index.js'; import { IPlot, getPlotComponent } from './components/plot/index.js'; -import { XYChartConfig } from '../../../config.type.js'; export class Orchestrator { private componentStore: { @@ -25,9 +30,9 @@ export class Orchestrator { chartData.xAxis, chartConfig.xAxis, { - titleColor: chartThemeConfig.xychartXAxisTitleColor, - labelColor: chartThemeConfig.xychartXAxisLableColor, - tickColor: chartThemeConfig.xychartXAxisTickColor, + titleColor: chartThemeConfig.xAxisTitleColor, + labelColor: chartThemeConfig.xAxisLableColor, + tickColor: chartThemeConfig.xAxisTickColor, }, chartConfig.fontFamily ), @@ -35,9 +40,9 @@ export class Orchestrator { chartData.yAxis, chartConfig.yAxis, { - titleColor: chartThemeConfig.xychartYAxisTitleColor, - labelColor: chartThemeConfig.xychartYAxisLableColor, - tickColor: chartThemeConfig.xychartYAxisTickColor, + titleColor: chartThemeConfig.yAxisTitleColor, + labelColor: chartThemeConfig.yAxisLableColor, + tickColor: chartThemeConfig.yAxisTickColor, }, chartConfig.fontFamily ), diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 0de677f259..c224c8ebe2 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -1,4 +1,3 @@ -import { XYChartConfig } from '../../../../config.type.js'; import { BoundingRect, ChartComponent, @@ -7,6 +6,7 @@ import { Point, XYChartData, XYChartThemeConfig, + XYChartConfig, } from '../Interfaces.js'; import { ITextDimensionCalculator, @@ -28,7 +28,7 @@ export class ChartTitle implements ChartComponent { width: 0, height: 0, }; - this.showChartTitle = !!(this.chartData.title && this.chartConfig.showtitle); + this.showChartTitle = !!(this.chartData.title && this.chartConfig.showTitle); } setBoundingBoxXY(point: Point): void { this.boundingRect.x = point.x; @@ -69,7 +69,7 @@ export class ChartTitle implements ChartComponent { horizontalPos: 'middle', x: this.boundingRect.x + this.boundingRect.width / 2, y: this.boundingRect.y + this.boundingRect.height / 2, - fill: this.chartThemeConfig.xychartTitleColor, + fill: this.chartThemeConfig.titleColor, rotation: 0, }, ], diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts index 6c354cd510..bb826fbb47 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts @@ -1,9 +1,8 @@ import { ScaleBand, scaleBand } from 'd3'; -import { XYChartAxisConfig } from '../../../../../config.type.js'; import { log } from '../../../../../logger.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; -import { XYChartAxisThemeConfig } from '../../Interfaces.js'; +import { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; export class BandAxis extends BaseAxis { private scale: ScaleBand<string>; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index a9e5516268..3041ce13a9 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -1,4 +1,3 @@ -import { XYChartAxisConfig } from '../../../../../config.type.js'; import { log } from '../../../../../logger.js'; import { BoundingRect, @@ -6,6 +5,7 @@ import { DrawableElem, Point, XYChartAxisThemeConfig, + XYChartAxisConfig, } from '../../Interfaces.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { AxisPosition, IAxis } from './index.js'; @@ -76,7 +76,7 @@ export abstract class BaseAxis implements IAxis { if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); this.outerPadding = spaceRequired.width / 2; - const heightRequired = spaceRequired.height + this.axisConfig.lablePadding * 2; + const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2; log.trace('height required for axis label: ', heightRequired); if (heightRequired <= availableHeight) { availableHeight -= heightRequired; @@ -108,7 +108,7 @@ export abstract class BaseAxis implements IAxis { if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); this.outerPadding = spaceRequired.height / 2; - const widthRequired = spaceRequired.width + this.axisConfig.lablePadding * 2; + const widthRequired = spaceRequired.width + this.axisConfig.labelPadding * 2; log.trace('width required for axis label: ', widthRequired); if (widthRequired <= availableWidth) { availableWidth -= widthRequired; @@ -124,7 +124,7 @@ export abstract class BaseAxis implements IAxis { [this.title], this.axisConfig.labelFontSize ); - const widthRequired = spaceRequired.height + this.axisConfig.lablePadding * 2; + const widthRequired = spaceRequired.height + this.axisConfig.labelPadding * 2; log.trace('width required for axis title: ', widthRequired); if (widthRequired <= availableWidth) { availableWidth -= widthRequired; @@ -168,7 +168,7 @@ export abstract class BaseAxis implements IAxis { x: this.boundingRect.x + this.boundingRect.width - - this.axisConfig.lablePadding - + this.axisConfig.labelPadding - this.axisConfig.tickLength, y: this.getScaleValue(tick), fill: this.axisThemeConfig.labelColor, @@ -222,7 +222,7 @@ export abstract class BaseAxis implements IAxis { data: this.getTickValues().map((tick) => ({ text: tick.toString(), x: this.getScaleValue(tick), - y: this.boundingRect.y + this.axisConfig.lablePadding + this.axisConfig.tickLength, + y: this.boundingRect.y + this.axisConfig.labelPadding + this.axisConfig.tickLength, fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, @@ -277,7 +277,7 @@ export abstract class BaseAxis implements IAxis { y: this.boundingRect.y + this.boundingRect.height - - this.axisConfig.lablePadding - + this.axisConfig.labelPadding - this.axisConfig.tickLength, fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index 23acf3f2a1..dec92f0bf7 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -1,9 +1,8 @@ import { ScaleLinear, scaleLinear } from 'd3'; -import { XYChartAxisConfig } from '../../../../../config.type.js'; import { log } from '../../../../../logger.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; -import { XYChartAxisThemeConfig } from '../../Interfaces.js'; +import { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; export class LinearAxis extends BaseAxis { private scale: ScaleLinear<number, number>; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index f1a3df093e..5512e22e48 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,8 +1,8 @@ -import { XYChartAxisConfig } from '../../../../../config.type.js'; import { AxisDataType, ChartComponent, XYChartAxisThemeConfig, + XYChartAxisConfig, isBandAxisData, } from '../../Interfaces.js'; import { TextDimensionCalculatorWithFont } from '../../TextDimensionCalculator.js'; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index 7308adde11..09149f2544 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,5 +1,4 @@ -import { XYChartConfig } from '../../../../../config.type.js'; -import { BarPlotData, BoundingRect, DrawableElem } from '../../Interfaces.js'; +import { BarPlotData, BoundingRect, DrawableElem, XYChartConfig } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; export class BarPlot { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index cd1533b1e6..4320b76086 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -1,6 +1,5 @@ import { line } from 'd3'; -import { XYChartConfig } from '../../../../../config.type.js'; -import { DrawableElem, LinePlotData } from '../../Interfaces.js'; +import { DrawableElem, LinePlotData, XYChartConfig } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; export class LinePlot { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts index 5796ae8da4..c87165d405 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts @@ -1,5 +1,4 @@ -import { XYChartConfig } from '../../../../../config.type.js'; -import { BoundingRect, DrawableElem, XYChartThemeConfig } from '../../Interfaces.js'; +import { BoundingRect, DrawableElem, XYChartConfig, XYChartThemeConfig } from '../../Interfaces.js'; export class PlotBorder { constructor( private boundingRect: BoundingRect, @@ -19,7 +18,7 @@ export class PlotBorder { path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${ y + height } L ${x},${y}`, - strokeFill: this.chartThemeConfig.xychartAxisLineColor, + strokeFill: this.chartThemeConfig.axisLineColor, strokeWidth: 1, }, ], @@ -35,7 +34,7 @@ export class PlotBorder { path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${ y + height } L ${x},${y}`, - strokeFill: this.chartThemeConfig.xychartAxisLineColor, + strokeFill: this.chartThemeConfig.axisLineColor, strokeWidth: 1, }, ], diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index bb3b90bc7c..680d19ece2 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -5,13 +5,13 @@ import { DrawableElem, Point, XYChartThemeConfig, + XYChartConfig, } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; import { ChartComponent } from '../../Interfaces.js'; import { LinePlot } from './LinePlot.js'; 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; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 80f3b364e0..ce5bc4e775 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -1,7 +1,5 @@ -// @ts-ignore: TODO Fix ts errors -import { XYChartConfig } from '../../../config.type.js'; import { log } from '../../../logger.js'; -import { DrawableElem, XYChartData, XYChartThemeConfig } from './Interfaces.js'; +import { DrawableElem, XYChartData, XYChartConfig, XYChartThemeConfig } from './Interfaces.js'; import { Orchestrator } from './Orchestrator.js'; export class XYChartBuilder { diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 8f1e80e61b..6023898ec2 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -2,6 +2,7 @@ import { adjust, channel } from 'khroma'; import mermaidAPI from '../../mermaidAPI.js'; import * as configApi from '../../config.js'; +import defaultConfig from '../../defaultConfig.js'; import { sanitizeText } from '../common/common.js'; import { setAccTitle, @@ -20,14 +21,16 @@ import { XYChartThemeConfig, isBandAxisData, isLinearAxisData, + XYChartConfig, } from './chartBuilder/Interfaces.js'; -import { XYChartConfig } from '../../config.type.js'; import { getThemeVariables } from '../../themes/theme-default.js'; const defaultThemeVariables = getThemeVariables(); const config = configApi.getConfig(); +let plotIndex = 0; + function plotColorPaletteGenerator(baseColor: string, noOfColorNeeded = 15): string[] { const colors = []; const MAX_HUE_VALUE = 360; @@ -48,62 +51,45 @@ function plotColorPaletteGenerator(baseColor: string, noOfColorNeeded = 15): str function getChartDefaultThemeConfig(): XYChartThemeConfig { return { - xychartTitleColor: - config.themeVariables?.xychartTitleColor || defaultThemeVariables.xychartTitleColor, - xychartAxisLineColor: - config.themeVariables?.xychartAxisLineColor || defaultThemeVariables.xychartAxisLineColor, - xychartXAxisLableColor: - config.themeVariables?.xychartXAxisLableColor || defaultThemeVariables.xychartXAxisLableColor, - xychartXAxisTitleColor: - config.themeVariables?.xychartXAxisTitleColor || defaultThemeVariables.xychartXAxisTitleColor, - xychartXAxisTickColor: - config.themeVariables?.xychartXAxisTickColor || defaultThemeVariables.xychartXAxisTickColor, - xychartYAxisLableColor: - config.themeVariables?.xychartYAxisLableColor || defaultThemeVariables.xychartYAxisLableColor, - xychartYAxisTitleColor: - config.themeVariables?.xychartYAxisTitleColor || defaultThemeVariables.xychartYAxisTitleColor, - xychartYAxisTickColor: - config.themeVariables?.xychartYAxisTickColor || defaultThemeVariables.xychartYAxisTickColor, - xychartPlotBaseColor: - config.themeVariables?.xychartPlotBaseColor || defaultThemeVariables.xychartPlotBaseColor, + titleColor: + config.themeVariables?.xyChart?.titleColor || defaultThemeVariables.xyChart.titleColor, + axisLineColor: + config.themeVariables?.xyChart?.axisLineColor || defaultThemeVariables.xyChart.axisLineColor, + xAxisLableColor: + config.themeVariables?.xyChart?.xAxisLableColor || + defaultThemeVariables.xyChart.xAxisLableColor, + xAxisTitleColor: + config.themeVariables?.xyChart?.xAxisTitleColor || + defaultThemeVariables.xyChart.xAxisTitleColor, + xAxisTickColor: + config.themeVariables?.xyChart?.xAxisTickColor || + defaultThemeVariables.xyChart.xAxisTickColor, + yAxisLableColor: + config.themeVariables?.xyChart?.yAxisLableColor || + defaultThemeVariables.xyChart.yAxisLableColor, + yAxisTitleColor: + config.themeVariables?.xyChart?.yAxisTitleColor || + defaultThemeVariables.xyChart.yAxisTitleColor, + yAxisTickColor: + config.themeVariables?.xyChart?.yAxisTickColor || + defaultThemeVariables.xyChart.yAxisTickColor, + plotBaseColor: + config.themeVariables?.xyChart?.plotBaseColor || defaultThemeVariables.xyChart.plotBaseColor, }; } function getChartDefaultConfig(): XYChartConfig { - return config.xyChart - ? { ...config.xyChart, yAxis: { ...config.xyChart.yAxis }, xAxis: { ...config.xyChart.xAxis } } - : { - width: 700, - height: 500, - fontFamily: config.fontFamily || 'Sans', - titleFontSize: 16, - titlePadding: 5, - showtitle: true, - plotBorderWidth: 2, - yAxis: { - showLabel: true, - labelFontSize: 14, - lablePadding: 5, - showTitle: true, - titleFontSize: 16, - titlePadding: 5, - showTick: true, - tickLength: 5, - tickWidth: 2, - }, - xAxis: { - showLabel: true, - labelFontSize: 14, - lablePadding: 5, - showTitle: true, - titleFontSize: 16, - titlePadding: 5, - showTick: true, - tickLength: 5, - tickWidth: 2, - }, - chartOrientation: 'vertical', - plotReservedSpacePercent: 50, - }; + return { + ...(defaultConfig.xyChart as XYChartConfig), + ...(config.xyChart ? config.xyChart : {}), + yAxis: { + ...(defaultConfig.xyChart as XYChartConfig).yAxis, + ...(config.xyChart?.yAxis ? config.xyChart.yAxis : {}), + }, + xAxis: { + ...(defaultConfig.xyChart as XYChartConfig).xAxis, + ...(config.xyChart?.xAxis ? config.xyChart.xAxis : {}), + }, + }; } function getChartDefalutData(): XYChartData { @@ -127,9 +113,9 @@ function getChartDefalutData(): XYChartData { let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); let xyChartData: XYChartData = getChartDefalutData(); -let plotColorPalette = Array.isArray(xyChartThemeConfig.xychartPlotBaseColor) - ? xyChartThemeConfig.xychartPlotBaseColor - : plotColorPaletteGenerator(xyChartThemeConfig.xychartPlotBaseColor); +let plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor) + ? xyChartThemeConfig.plotBaseColor + : plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor); let hasSetXAxis = false; let hasSetYAxis = false; @@ -223,8 +209,6 @@ function transformDataWithOutCategory(data: number[]): SimplePlotDataType { return retData; } -let plotIndex = 0; - function getPlotColorFromPalette(plotIndex: number): string { return plotColorPalette[plotIndex === 0 ? 0 : plotIndex % (plotColorPalette.length - 1)]; } @@ -272,9 +256,9 @@ const clear = function () { xyChartConfig = getChartDefaultConfig(); xyChartData = getChartDefalutData(); xyChartThemeConfig = getChartDefaultThemeConfig(); - plotColorPalette = Array.isArray(xyChartThemeConfig.xychartPlotBaseColor) - ? xyChartThemeConfig.xychartPlotBaseColor - : plotColorPaletteGenerator(xyChartThemeConfig.xychartPlotBaseColor); + plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor) + ? xyChartThemeConfig.plotBaseColor + : plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor); hasSetXAxis = false; hasSetYAxis = false; }; diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 6e5f48d95e..c24a50ff50 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -43,6 +43,7 @@ required: - er - pie - quadrantChart + - xyChart - requirement - mindmap - gitGraph @@ -197,6 +198,8 @@ properties: $ref: '#/$defs/PieDiagramConfig' quadrantChart: $ref: '#/$defs/QuadrantChartConfig' + xyChart: + $ref: '#/$defs/XYChartConfig' requirement: $ref: '#/$defs/RequirementDiagramConfig' mindmap: @@ -982,6 +985,131 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) type: number minimum: 0 default: 2 + XYChartAxisConfig: + title: XYChart axis config + description: This object contains configuration for XYChart axis config + type: object + unevaluatedProperties: true + required: + - showLabel + - labelFontSize + - labelPadding + - showTitle + - titleFontSize + - titlePadding + - showTick + - tickLength + - tickWidth + properties: + showLabel: + description: Should show the axis labels (tick text) + type: boolean + default: true + labelFontSize: + description: font size of the axis labels (tick text) + type: integer + default: 14 + minimum: 1 + labelPadding: + description: top and bottom space from axis label (tick text) + type: integer + default: 5 + minimum: 0 + showTitle: + description: Should show the axis title + type: boolean + default: true + titleFontSize: + description: font size of the axis title + type: integer + default: 16 + minimum: 1 + titlePadding: + description: top and bottom space from axis title + type: integer + default: 5 + minimum: 0 + showTick: + description: Should show the axis tick lines + type: boolean + default: true + tickLength: + description: length of the axis tick lines + type: integer + default: 5 + minimum: 1 + tickWidth: + description: width of the axis tick lines + type: integer + default: 2 + minimum: 1 + XYChartConfig: + title: XYChart Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: This object contains configuration specific to XYCharts + type: object + unevaluatedProperties: false + required: + - width + - height + - fontFamily + - titleFontSize + - titlePadding + - xAxis + - yAxis + - showTitle + - plotBorderWidth + - chartOrientation + - plotReservedSpacePercent + properties: + width: + description: width of the chart + type: integer + default: 700 + minimum: 1 + height: + description: height of the chart + type: integer + default: 500 + minimum: 1 + fontFamily: + description: Font family of texts in the xyChart + type: string + default: '"trebuchet ms", verdana, arial, sans-serif' + titleFontSize: + description: Font size of the chart title + type: integer + default: 16 + minimum: 1 + titlePadding: + description: Top and bottom space from the chart title + type: integer + default: 5 + minimum: 0 + showTitle: + description: Should show the chart title + type: boolean + default: true + xAxis: + $ref: '#/$defs/XYChartAxisConfig' + default: { '$ref': '#/$defs/XYChartAxisConfig' } + yAxis: + $ref: '#/$defs/XYChartAxisConfig' + default: { '$ref': '#/$defs/XYChartAxisConfig' } + plotBorderWidth: + description: width of the line around the plot of the chart + type: integer + default: 2 + minimum: 0 + chartOrientation: + description: How to plot will be drawn horizontal or vertical + tsType: '"vertical" | "horizontal"' + default: 'vertical' + plotReservedSpacePercent: + description: Minimum percent of space plots of the chart will take + type: integer + default: 50 + minimum: 30 ErDiagramConfig: title: Er Diagram Config diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index b274a4562e..c95d44371f 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -273,16 +273,18 @@ class Theme { this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor; /* xychart */ - this.xychartBackgroundColor = this.xychartBackgroundColor || this.background; - this.xychartTitleColor = this.xychartTitleColor || this.primaryTextColor; - this.xychartAxisLineColor = this.xychartAxisLineColor || this.primaryTextColor; - this.xychartXAxisTitleColor = this.xychartXAxisTitleColor || this.primaryTextColor; - this.xychartXAxisLableColor = this.xychartXAxisLableColor || this.primaryTextColor; - this.xychartXAxisTickColor = this.xychartXAxisTickColor || this.primaryTextColor; - this.xychartYAxisTitleColor = this.xychartYAxisTitleColor || this.primaryTextColor; - this.xychartYAxisLableColor = this.xychartYAxisLableColor || this.primaryTextColor; - this.xychartYAxisTickColor = this.xychartYAxisTickColor || this.primaryTextColor; - this.xychartPlotBaseColor = this.xychartPlotBaseColor || darken(this.primaryColor, 25); + this.xyChart = { + backgroundColor: this.xyChart?.backgroundColor || this.background, + titleColor: this.xyChart?.titleColor || this.primaryTextColor, + axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, + xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, + xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, + yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + plotBaseColor: this.xyChart?.plotBaseColor || darken(this.primaryColor, 25), + }; /* requirement-diagram */ this.requirementBackground = this.requirementBackground || this.primaryColor; From 6c2bd33f363ec6d7093d8a912299f5132ce9fce7 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 20 Aug 2023 17:51:53 +0530 Subject: [PATCH 023/126] Addressed all requested changes --- demos/xychart.html | 22 +- .../xychart/chartBuilder/Interfaces.ts | 2 +- .../xychart/chartBuilder/Orchestrator.ts | 20 +- .../chartBuilder/TextDimensionCalculator.ts | 59 +--- .../chartBuilder/components/ChartTitle.ts | 12 +- .../chartBuilder/components/axis/BandAxis.ts | 4 +- .../chartBuilder/components/axis/BaseAxis.ts | 22 +- .../components/axis/LinearAxis.ts | 4 +- .../chartBuilder/components/axis/index.ts | 9 +- .../chartBuilder/components/plot/BarPlot.ts | 6 +- .../chartBuilder/components/plot/LinePlot.ts | 6 +- .../chartBuilder/components/plot/index.ts | 16 +- .../diagrams/xychart/chartBuilder/index.ts | 6 +- .../src/diagrams/xychart/parser/xychart.jison | 137 ++++----- .../xychart/parser/xychart.jison.spec.ts | 261 +++++++++++------- .../mermaid/src/diagrams/xychart/xychartDb.ts | 45 +-- .../src/diagrams/xychart/xychartDiagram.ts | 1 - .../src/diagrams/xychart/xychartRenderer.ts | 13 +- .../mermaid/src/rendering-util/createText.js | 16 ++ 19 files changed, 377 insertions(+), 284 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index 3d0da3fb3d..ad7bf0944d 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -17,7 +17,7 @@ <h1>XY Charts demos</h1> <pre class="mermaid"> xychart-beta horizontal - title Basic xychart + title "Basic xychart" x-axis "this is x axis" [category1, "category 2", category3, category4] y-axis yaxisText 10 --> 150 bar "sample bat" [52, 96, 35, 10] @@ -29,7 +29,7 @@ <h1>XY Charts demos</h1> <h1>XY Charts demos</h1> <pre class="mermaid"> xychart-beta - title Basic xychart + title "Basic xychart" x-axis "this is x axis" [category1, "category 2", category3, category4] y-axis yaxisText 10 --> 150 bar "sample bat" [52, 96, 35, 10] @@ -48,6 +48,24 @@ <h1>XY Charts demos</h1> bar "sample bat" [52, 96, 35, 10] </pre> + <h1>XY Charts demos</h1> + <pre class="mermaid"> + xychart-beta + title "Basic xychart with many categories" + x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] + y-axis yaxisText 10 --> 150 + bar "sample bat" [52, 96, 35, 10, 87, 34, 67, 99] + </pre> + + <h1>XY Charts demos</h1> + <pre class="mermaid"> + xychart-beta + title "Basic xychart with many categories with category overlap" + x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7] + y-axis yaxisText 10 --> 150 + bar "sample bat" [52, 96, 35, 10, 87, 34, 67, 99] + </pre> + <hr /> <script type="module"> diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 843e02675c..32cd14d635 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -40,7 +40,7 @@ export interface BarPlotData { export type PlotData = LinePlotData | BarPlotData; export function isBarPlot(data: PlotData): data is BarPlotData { - return data.type === 'line'; + return data.type === 'bar'; } export interface BandAxisDataType { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index 1386f53cdc..e18eb92a31 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -8,23 +8,25 @@ import { } from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; import { ChartComponent } from './Interfaces.js'; -import { IAxis, getAxis } from './components/axis/index.js'; -import { IPlot, getPlotComponent } from './components/plot/index.js'; +import { Axis, getAxis } from './components/axis/index.js'; +import { Plot, getPlotComponent } from './components/plot/index.js'; +import { SVGGType } from '../xychartDb.js'; export class Orchestrator { private componentStore: { title: ChartComponent; - plot: IPlot; - xAxis: IAxis; - yAxis: IAxis; + plot: Plot; + xAxis: Axis; + yAxis: Axis; }; constructor( private chartConfig: XYChartConfig, private chartData: XYChartData, - private chartThemeConfig: XYChartThemeConfig + private chartThemeConfig: XYChartThemeConfig, + private tmpSVGGElem: SVGGType ) { this.componentStore = { - title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig), + title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGElem), plot: getPlotComponent(chartConfig, chartData, chartThemeConfig), xAxis: getAxis( chartData.xAxis, @@ -34,7 +36,7 @@ export class Orchestrator { labelColor: chartThemeConfig.xAxisLableColor, tickColor: chartThemeConfig.xAxisTickColor, }, - chartConfig.fontFamily + tmpSVGGElem ), yAxis: getAxis( chartData.yAxis, @@ -44,7 +46,7 @@ export class Orchestrator { labelColor: chartThemeConfig.yAxisLableColor, tickColor: chartThemeConfig.yAxisTickColor, }, - chartConfig.fontFamily + tmpSVGGElem ), }; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts index ea77cf4130..02d8413225 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts @@ -1,49 +1,15 @@ import { Dimension } from './Interfaces.js'; +import { computeDimensionOfText } from '../../../rendering-util/createText.js'; +import { SVGGType } from '../xychartDb.js'; -export interface ITextDimensionCalculator { - getDimension(texts: string[], fontSize: number, fontFamily?: string): Dimension; +export interface TextDimensionCalculator { + getMaxDimension(texts: string[], fontSize: number): Dimension; } -export class TextDimensionCalculator implements ITextDimensionCalculator { - getDimension(texts: string[], fontSize: number): Dimension { - return { - width: texts.reduce((acc, cur) => Math.max(cur.length, acc), 0) * fontSize, - height: fontSize, - }; - } -} - -export class TextDimensionCalculatorWithFont implements ITextDimensionCalculator { - private container: HTMLSpanElement | null = null; - private hiddenElementId = 'mermaid-text-dimension-calculator'; - constructor(fontFamily?: string) { - if (document) { - let parentContainer = document.getElementById(this.hiddenElementId); - if (!parentContainer) { - parentContainer = document.createElement('div'); - parentContainer.id = this.hiddenElementId; - parentContainer.style.position = 'absolute'; - parentContainer.style.top = '-100px'; - parentContainer.style.left = '0px'; - parentContainer.style.visibility = 'hidden'; - document.body.append(parentContainer); - } - const fontClassName = `font-${fontFamily}`; - const prevContainerAvailable = parentContainer.getElementsByClassName(fontClassName); - if (prevContainerAvailable.length > 0) { - this.container = prevContainerAvailable.item(0) as HTMLSpanElement; - } else { - this.container = document.createElement('div'); - this.container.className = fontClassName; - if (fontFamily) { - this.container.style.fontFamily = fontFamily; - } - parentContainer.append(this.container); - } - } - } - getDimension(texts: string[], fontSize: number): Dimension { - if (!this.container) { +export class TextDimensionCalculatorWithFont implements TextDimensionCalculator { + constructor(private parentGroup: SVGGType) {} + getMaxDimension(texts: string[], fontSize: number): Dimension { + if (!this.parentGroup) { return { width: texts.reduce((acc, cur) => Math.max(cur.length, acc), 0) * fontSize, height: fontSize, @@ -55,14 +21,17 @@ export class TextDimensionCalculatorWithFont implements ITextDimensionCalculator height: 0, }; - this.container.style.fontSize = `${fontSize}px`; + const elem = this.parentGroup + .append('g') + .attr('visibility', 'hidden') + .attr('font-size', fontSize); for (const t of texts) { - this.container.innerHTML = t; - const bbox = this.container.getBoundingClientRect(); + const bbox = computeDimensionOfText(elem, 1, t); dimension.width = Math.max(dimension.width, bbox.width); dimension.height = Math.max(dimension.height, bbox.height); } + elem.remove(); return dimension; } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index c224c8ebe2..6b3ec3c108 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -1,3 +1,4 @@ +import { SVGGType } from '../../xychartDb.js'; import { BoundingRect, ChartComponent, @@ -9,7 +10,7 @@ import { XYChartConfig, } from '../Interfaces.js'; import { - ITextDimensionCalculator, + TextDimensionCalculator, TextDimensionCalculatorWithFont, } from '../TextDimensionCalculator.js'; @@ -17,7 +18,7 @@ export class ChartTitle implements ChartComponent { private boundingRect: BoundingRect; private showChartTitle: boolean; constructor( - private textDimensionCalculator: ITextDimensionCalculator, + private textDimensionCalculator: TextDimensionCalculator, private chartConfig: XYChartConfig, private chartData: XYChartData, private chartThemeConfig: XYChartThemeConfig @@ -35,7 +36,7 @@ export class ChartTitle implements ChartComponent { this.boundingRect.y = point.y; } calculateSpace(availableSpace: Dimension): Dimension { - const titleDimension = this.textDimensionCalculator.getDimension( + const titleDimension = this.textDimensionCalculator.getMaxDimension( [this.chartData.title], this.chartConfig.titleFontSize ); @@ -82,8 +83,9 @@ export class ChartTitle implements ChartComponent { export function getChartTitleComponent( chartConfig: XYChartConfig, chartData: XYChartData, - chartThemeConfig: XYChartThemeConfig + chartThemeConfig: XYChartThemeConfig, + tmpSVGGElem: SVGGType ): ChartComponent { - const textDimensionCalculator = new TextDimensionCalculatorWithFont(chartConfig.fontFamily); + const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGElem); return new ChartTitle(textDimensionCalculator, chartConfig, chartData, chartThemeConfig); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts index bb826fbb47..e55f819536 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts @@ -1,6 +1,6 @@ import { ScaleBand, scaleBand } from 'd3'; import { log } from '../../../../../logger.js'; -import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; import { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; @@ -13,7 +13,7 @@ export class BandAxis extends BaseAxis { axisThemeConfig: XYChartAxisThemeConfig, categories: string[], title: string, - textDimensionCalculator: ITextDimensionCalculator + textDimensionCalculator: TextDimensionCalculator ) { super(axisConfig, title, textDimensionCalculator, axisThemeConfig); this.categories = categories; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index 3041ce13a9..e695600e26 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -7,10 +7,12 @@ import { XYChartAxisThemeConfig, XYChartAxisConfig, } from '../../Interfaces.js'; -import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; -import { AxisPosition, IAxis } from './index.js'; +import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import { AxisPosition, Axis } from './index.js'; -export abstract class BaseAxis implements IAxis { +const BAR_WIDTH_TO_TICK_WIDTH_RATIO = 0.7; + +export abstract class BaseAxis implements Axis { protected boundingRect: BoundingRect = { x: 0, y: 0, width: 0, height: 0 }; protected axisPosition: AxisPosition = 'left'; private range: [number, number]; @@ -22,7 +24,7 @@ export abstract class BaseAxis implements IAxis { constructor( protected axisConfig: XYChartAxisConfig, protected title: string, - protected textDimensionCalculator: ITextDimensionCalculator, + protected textDimensionCalculator: TextDimensionCalculator, protected axisThemeConfig: XYChartAxisThemeConfig ) { this.range = [0, 10]; @@ -58,15 +60,15 @@ export abstract class BaseAxis implements IAxis { } private getLabelDimension(): Dimension { - return this.textDimensionCalculator.getDimension( + return this.textDimensionCalculator.getMaxDimension( this.getTickValues().map((tick) => tick.toString()), this.axisConfig.labelFontSize ); } recalculateOuterPaddingToDrawBar(): void { - if (0.7 * this.getTickDistance() > this.outerPadding * 2) { - this.outerPadding = Math.floor((0.7 * this.getTickDistance()) / 2); + if (BAR_WIDTH_TO_TICK_WIDTH_RATIO * this.getTickDistance() > this.outerPadding * 2) { + this.outerPadding = Math.floor((BAR_WIDTH_TO_TICK_WIDTH_RATIO * this.getTickDistance()) / 2); } this.recalculateScale(); } @@ -88,7 +90,7 @@ export abstract class BaseAxis implements IAxis { availableHeight -= this.axisConfig.tickLength; } if (this.axisConfig.showTitle) { - const spaceRequired = this.textDimensionCalculator.getDimension( + const spaceRequired = this.textDimensionCalculator.getMaxDimension( [this.title], this.axisConfig.labelFontSize ); @@ -120,7 +122,7 @@ export abstract class BaseAxis implements IAxis { availableWidth -= this.axisConfig.tickLength; } if (this.axisConfig.showTitle) { - const spaceRequired = this.textDimensionCalculator.getDimension( + const spaceRequired = this.textDimensionCalculator.getMaxDimension( [this.title], this.axisConfig.labelFontSize ); @@ -270,7 +272,7 @@ export abstract class BaseAxis implements IAxis { if (this.showLabel) { drawableElement.push({ type: 'text', - groupTexts: ['bottom-axis', 'label'], + groupTexts: ['top-axis', 'label'], data: this.getTickValues().map((tick) => ({ text: tick.toString(), x: this.getScaleValue(tick), diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index dec92f0bf7..f32585a6c7 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -1,6 +1,6 @@ import { ScaleLinear, scaleLinear } from 'd3'; import { log } from '../../../../../logger.js'; -import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; import { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; @@ -13,7 +13,7 @@ export class LinearAxis extends BaseAxis { axisThemeConfig: XYChartAxisThemeConfig, domain: [number, number], title: string, - textDimensionCalculator: ITextDimensionCalculator + textDimensionCalculator: TextDimensionCalculator ) { super(axisConfig, title, textDimensionCalculator, axisThemeConfig); this.domain = domain; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index 5512e22e48..a40de82377 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,3 +1,4 @@ +import { SVGGType } from '../../../xychartDb.js'; import { AxisDataType, ChartComponent, @@ -11,7 +12,7 @@ import { LinearAxis } from './LinearAxis.js'; export type AxisPosition = 'left' | 'right' | 'top' | 'bottom'; -export interface IAxis extends ChartComponent { +export interface Axis extends ChartComponent { getScaleValue(value: string | number): number; setAxisPosition(axisPosition: AxisPosition): void; getAxisOuterPadding(): number; @@ -24,9 +25,9 @@ export function getAxis( data: AxisDataType, axisConfig: XYChartAxisConfig, axisThemeConfig: XYChartAxisThemeConfig, - fontFamily?: string -): IAxis { - const textDimansionCalculator = new TextDimensionCalculatorWithFont(fontFamily); + tmpSVGGElem: SVGGType +): Axis { + const textDimansionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGElem); if (isBandAxisData(data)) { return new BandAxis( axisConfig, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index 09149f2544..20d1af3112 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,12 +1,12 @@ import { BarPlotData, BoundingRect, DrawableElem, XYChartConfig } from '../../Interfaces.js'; -import { IAxis } from '../axis/index.js'; +import { Axis } from '../axis/index.js'; export class BarPlot { constructor( private barData: BarPlotData, private boundingRect: BoundingRect, - private xAxis: IAxis, - private yAxis: IAxis, + private xAxis: Axis, + private yAxis: Axis, private orientation: XYChartConfig['chartOrientation'], private plotIndex: number ) {} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index 4320b76086..fe58b1ef46 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -1,12 +1,12 @@ import { line } from 'd3'; import { DrawableElem, LinePlotData, XYChartConfig } from '../../Interfaces.js'; -import { IAxis } from '../axis/index.js'; +import { Axis } from '../axis/index.js'; export class LinePlot { constructor( private plotData: LinePlotData, - private xAxis: IAxis, - private yAxis: IAxis, + private xAxis: Axis, + private yAxis: Axis, private orientation: XYChartConfig['chartOrientation'], private plotIndex: number ) {} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 680d19ece2..e974da0e8a 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -7,20 +7,20 @@ import { XYChartThemeConfig, XYChartConfig, } from '../../Interfaces.js'; -import { IAxis } from '../axis/index.js'; +import { Axis } from '../axis/index.js'; import { ChartComponent } from '../../Interfaces.js'; import { LinePlot } from './LinePlot.js'; import { PlotBorder } from './PlotBorder.js'; import { BarPlot } from './BarPlot.js'; -export interface IPlot extends ChartComponent { - setAxes(xAxis: IAxis, yAxis: IAxis): void; +export interface Plot extends ChartComponent { + setAxes(xAxis: Axis, yAxis: Axis): void; } -export class Plot implements IPlot { +export class Plot implements Plot { private boundingRect: BoundingRect; - private xAxis?: IAxis; - private yAxis?: IAxis; + private xAxis?: Axis; + private yAxis?: Axis; constructor( private chartConfig: XYChartConfig, @@ -34,7 +34,7 @@ export class Plot implements IPlot { height: 0, }; } - setAxes(xAxis: IAxis, yAxis: IAxis) { + setAxes(xAxis: Axis, yAxis: Axis) { this.xAxis = xAxis; this.yAxis = yAxis; } @@ -99,6 +99,6 @@ export function getPlotComponent( chartConfig: XYChartConfig, chartData: XYChartData, chartThemeConfig: XYChartThemeConfig -): IPlot { +): Plot { return new Plot(chartConfig, chartData, chartThemeConfig); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index ce5bc4e775..2b308be2b0 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -1,4 +1,5 @@ import { log } from '../../../logger.js'; +import { SVGGType } from '../xychartDb.js'; import { DrawableElem, XYChartData, XYChartConfig, XYChartThemeConfig } from './Interfaces.js'; import { Orchestrator } from './Orchestrator.js'; @@ -6,12 +7,13 @@ export class XYChartBuilder { static build( config: XYChartConfig, chartData: XYChartData, - chartThemeConfig: XYChartThemeConfig + chartThemeConfig: XYChartThemeConfig, + tmpSVGGElem: SVGGType ): DrawableElem[] { log.trace(`Build start with Config: ${JSON.stringify(config, null, 2)}`); log.trace(`Build start with ChartData: ${JSON.stringify(chartData, null, 2)}`); log.trace(`Build start with ChartThemeConfig: ${JSON.stringify(chartThemeConfig, null, 2)}`); - const orchestrator = new Orchestrator(config, chartData, chartThemeConfig); + const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGElem); return orchestrator.getDrawableElement(); } } diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 743647df7d..7055327276 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -15,9 +15,9 @@ %s data %s data_inner %% -\%\%\{ { this.begin('open_directive'); return 'open_directive'; } -<open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } -<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; } +\%\%\{ { this.pushState('open_directive'); return 'open_directive'; } +<open_directive>((?:(?!\}\%\%)[^:.])*) { this.pushState('type_directive'); return 'type_directive'; } +<type_directive>":" { this.popState(); this.pushState('arg_directive'); return ':'; } <type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; } <arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive'; \%\%(?!\{)[^\n]* /* skip comments */ @@ -27,41 +27,39 @@ [\n\r]+ return 'NEWLINE'; \%\%[^\n]* /* do nothing */ -title { this.begin("title"); return 'title'; } -<title>(?!\n|;|#)*[^\n]* { this.popState(); return "title_value"; } +"title" { return 'title'; } - -accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; } +"accTitle"\s*":"\s* { this.pushState("acc_title");return 'acc_title'; } <acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; } -accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; } +"accDescr"\s*":"\s* { this.pushState("acc_descr");return 'acc_descr'; } <acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } -accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} +"accDescr"\s*"{"\s* { this.pushState("acc_descr_multiline");} <acc_descr_multiline>[\}] { this.popState(); } <acc_descr_multiline>[^\}]* { return "acc_descr_multiline_value"; } -"xychart-beta" {return 'XYCHART';} +"xychart-beta" {return 'XYCHART';} ("vertical"|"horizontal") {return 'CHART_ORIENTATION'} -"x-axis" { this.begin("axis_data"); return "X_AXIS"; } -"y-axis" { this.begin("axis_data"); return "Y_AXIS"; } +"x-axis" { this.pushState("axis_data"); return "X_AXIS"; } +"y-axis" { this.pushState("axis_data"); return "Y_AXIS"; } <axis_data>[\[] { this.popState(); return 'SQUARE_BRACES_START'; } -<axis_data>[+-]?\d+(?:\.\d+)? { return 'NUMBER_WITH_DECIMAL'; } +<axis_data>[+-]?(?:\d+(?:\.\d+)?|\.\d+) { return 'NUMBER_WITH_DECIMAL'; } <axis_data>"-->" { return 'ARROW_DELIMITER'; } -"line" { this.begin("data"); return 'LINE'; } -"bar" { this.begin("data"); return 'BAR'; } -<data>[\[] { this.popState(); this.begin("data_inner"); return 'SQUARE_BRACES_START'; } -<data_inner>[+-]?\d+(?:\.\d+)? { return 'NUMBER_WITH_DECIMAL';} +"line" { this.pushState("data"); return 'LINE'; } +"bar" { this.pushState("data"); return 'BAR'; } +<data>[\[] { this.pushState("data_inner"); return 'SQUARE_BRACES_START'; } +<data_inner>[+-]?(?:\d+(?:\.\d+)?|\.\d+) { return 'NUMBER_WITH_DECIMAL';} <data_inner>[\]] { this.popState(); return 'SQUARE_BRACES_END'; } -["][`] { this.begin("md_string");} +["][`] { this.pushState("md_string");} <md_string>[^`"]+ { return "MD_STR";} <md_string>[`]["] { this.popState();} -["] this.begin("string"); +["] this.pushState("string"); <string>["] this.popState(); <string>[^"]* return "STR"; @@ -72,7 +70,6 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} ":" return 'COLON'; \+ return 'PLUS'; "," return 'COMMA'; -"=" return 'EQUALS'; \= return 'EQUALS'; "*" return 'MULT'; \# return 'BRKT'; @@ -81,9 +78,8 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} "&" return 'AMP'; \- return 'MINUS'; [0-9]+ return 'NUM'; -\s /* skip */ +\s+ /* skip */ ";" return 'SEMI'; -[!"#$%&'*+,-.`?\\_/] return 'PUNCTUATION'; <<EOF>> return 'EOF'; /lex @@ -96,61 +92,79 @@ start : eol start | directive start | XYCHART chartConfig start - | XYCHART start + | XYCHART start | document - ; + ; chartConfig - : CHART_ORIENTATION { yy.setOrientation($1); } + : CHART_ORIENTATION { yy.setOrientation($1); } ; document - : /* empty */ - | document statement - ; - -line - : statement - ; + : /* empty */ + | document statement + ; statement : statement eol - | title title_value { yy.setDiagramTitle($title_value.trim()); } + | title text { yy.setDiagramTitle($text.text.trim()); } | X_AXIS parseXAxis | Y_AXIS parseYAxis - | LINE parseLineData { yy.setLineData({text: '', type: 'text'}, $parseLineData); } - | LINE text parseLineData { yy.setLineData($text, $parseLineData); } - | BAR parseBarData { yy.setBarData({text: '', type: 'text'}, $parseBarData); } - | BAR text parseBarData { yy.setBarData($text, $parseBarData); } - ; + | LINE plotData { yy.setLineData({text: '', type: 'text'}, $plotData); } + | LINE text plotData { yy.setLineData($text, $plotData); } + | BAR plotData { yy.setBarData({text: '', type: 'text'}, $plotData); } + | BAR text plotData { yy.setBarData($text, $plotData); } + ; -parseLineData - : SQUARE_BRACES_START NUMBER_WITH_DECIMAL parseLineData {$parseLineData.unshift(Number($NUMBER_WITH_DECIMAL)); $$ = $parseLineData} - | COMMA NUMBER_WITH_DECIMAL parseLineData {$parseLineData.unshift(Number($NUMBER_WITH_DECIMAL)); $$ = $parseLineData;} - | SQUARE_BRACES_END {$$ = []} +plotData + : SQUARE_BRACES_START commaSeperateNumber SQUARE_BRACES_END { $$ = $commaSeperateNumber } ; -parseBarData - : SQUARE_BRACES_START NUMBER_WITH_DECIMAL parseBarData {$parseBarData.unshift(Number($NUMBER_WITH_DECIMAL)); $$ = $parseBarData} - | COMMA NUMBER_WITH_DECIMAL parseBarData {$parseBarData.unshift(Number($NUMBER_WITH_DECIMAL)); $$ = $parseBarData;} - | SQUARE_BRACES_END {$$ = []} +commaSeperateNumber + : NUMBER_WITH_DECIMAL commaSeperateNumberValues { + $commaSeperateNumberValues = $commaSeperateNumberValues || []; + $commaSeperateNumberValues.unshift(Number($NUMBER_WITH_DECIMAL)); + $$ = $commaSeperateNumberValues + } ; +commaSeperateNumberValues + : COMMA NUMBER_WITH_DECIMAL commaSeperateNumberValues { + $commaSeperateNumberValues = $commaSeperateNumberValues || []; + $commaSeperateNumberValues.unshift(Number($NUMBER_WITH_DECIMAL)); + $$ = $commaSeperateNumberValues + } + |; + parseXAxis : text {yy.setXAxisTitle($text);} - | text xAxisBandData {yy.setXAxisTitle($text); yy.setXAxisBand($xAxisBandData);} - | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setXAxisTitle($text); yy.setXAxisRangeData(Number($2), Number($4));} + | text bandData {yy.setXAxisTitle($text); yy.setXAxisBand($bandData);} + | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setXAxisTitle($text); yy.setXAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));} + ; + +bandData + : SQUARE_BRACES_START commaSeperateText SQUARE_BRACES_END {$$ = $commaSeperateText} ; -xAxisBandData - : SQUARE_BRACES_START text xAxisBandData {$xAxisBandData.unshift($text); $$ = $xAxisBandData} - | COMMA text xAxisBandData {$xAxisBandData.unshift($text); $$ = $xAxisBandData;} - | SQUARE_BRACES_END {$$ = []} +commaSeperateText + : text commaSeperateTextValues { + $commaSeperateTextValues = $commaSeperateTextValues || []; + $commaSeperateTextValues.unshift($text); + $$ = $commaSeperateTextValues + } ; +commaSeperateTextValues + : COMMA text commaSeperateTextValues { + $commaSeperateTextValues = $commaSeperateTextValues || []; + $commaSeperateTextValues.unshift($text); + $$ = $commaSeperateTextValues + } + |; + parseYAxis : text {yy.setYAxisTitle($text);} - | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setYAxisTitle($text); yy.setYAxisRangeData(Number($2), Number($4));} + | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setYAxisTitle($text); yy.setYAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));} ; directive @@ -180,22 +194,17 @@ closeDirective : close_directive { yy.parseDirective('}%%', 'close_directive', 'xychart'); } ; -text: alphaNum - { $$={text:$alphaNum, type: 'text'};} - | STR - { $$={text: $STR, type: 'text'};} - | MD_STR - { $$={text: $MD_STR, type: 'markdown'};} +text: alphaNum { $$={text:$alphaNum, type: 'text'};} + | STR { $$={text: $STR, type: 'text'};} + | MD_STR { $$={text: $MD_STR, type: 'markdown'};} ; alphaNum - : alphaNumToken - {$$=$alphaNumToken;} - | alphaNum alphaNumToken - {$$=$alphaNum+''+$alphaNumToken;} + : alphaNumToken {$$=$alphaNumToken;} + | alphaNum alphaNumToken {$$=$alphaNum+''+$alphaNumToken;} ; -alphaNumToken : PUNCTUATION | AMP | NUM | ALPHA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ; +alphaNumToken : AMP | NUM | ALPHA | PLUS | EQUALS | MULT | DOT | BRKT| MINUS | UNDERSCORE ; %% diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 24c6f2891a..446d225ec8 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -43,11 +43,16 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); }); - it('parse title of the chart', () => { - const str = 'xychart-beta \n title This is a title'; + it('parse title of the chart within "', () => { + const str = 'xychart-beta \n title "This is a title"'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('This is a title'); }); + it('parse title of the chart without "', () => { + const str = 'xychart-beta \n title oneLinertitle'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('oneLinertitle'); + }); it('should be able to parse directive', () => { const str = @@ -63,13 +68,13 @@ describe('Testing xychart jison file', () => { }); it('parse chart orientation', () => { - let str = 'xychart-beta vertical'; + const str = 'xychart-beta vertical'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setOrientation).toHaveBeenCalledWith('vertical'); + }); - clearMocks(); - - str = 'xychart-beta horizontal '; + it('parse chart orientation with spaces', () => { + let str = 'xychart-beta horizontal '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setOrientation).toHaveBeenCalledWith('horizontal'); @@ -78,52 +83,66 @@ describe('Testing xychart jison file', () => { }); it('parse x-axis', () => { - let str = 'xychart-beta \nx-axis xAxisName\n'; + const str = 'xychart-beta \nx-axis xAxisName\n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text', }); + }); - clearMocks(); - - str = 'xychart-beta \nx-axis xAxisName \n'; + it('parse x-axis with axis name without "', () => { + const str = 'xychart-beta \nx-axis xAxisName \n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text', }); + }); - clearMocks(); - - str = 'xychart-beta \n x-axis "xAxisName has space"\n'; + it('parse x-axis with axis name with "', () => { + const str = 'xychart-beta \n x-axis "xAxisName has space"\n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName has space', type: 'text', }); + }); - clearMocks(); - - str = 'xychart-beta \n x-axis " xAxisName has space " \n'; + it('parse x-axis with axis name with " with spaces', () => { + const str = 'xychart-beta \n x-axis " xAxisName has space " \n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: ' xAxisName has space ', type: 'text', }); + }); - clearMocks(); - str = 'xychart-beta \nx-axis xAxisName 45.5 --> 33 \n'; + it('parse x-axis with axis name and range data', () => { + const str = 'xychart-beta \nx-axis xAxisName 45.5 --> 33 \n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text', }); expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 33); + }); + it('parse x-axis throw error for invalid range data', () => { + const str = 'xychart-beta \nx-axis xAxisName aaa --> 33 \n'; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse x-axis with axis name and range data with only decimal part', () => { + const str = 'xychart-beta \nx-axis xAxisName 45.5 --> .34 \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: 'xAxisName', + type: 'text', + }); + expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 0.34); + }); - clearMocks(); - - str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] \n '; + it('parse x-axis with axis name and category data', () => { + const str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] \n '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', @@ -136,9 +155,17 @@ describe('Testing xychart jison file', () => { }, { text: 'cat2a', type: 'text' }, ]); - clearMocks(); + }); - str = `xychart-beta \n x-axis "this is x axis" [category1, "category 2", category3]\n`; + it('parse x-axis throw error if unbalanced bracket', () => { + let str = 'xychart-beta \nx-axis xAxisName [ "cat1" [ cat2a ] \n '; + expect(parserFnConstructor(str)).toThrow(); + str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] ] \n '; + expect(parserFnConstructor(str)).toThrow(); + }); + + it('parse x-axis complete variant 1', () => { + const str = `xychart-beta \n x-axis "this is x axis" [category1, "category 2", category3]\n`; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'this is x axis', type: 'text' }); expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ @@ -146,9 +173,11 @@ describe('Testing xychart jison file', () => { { text: 'category 2', type: 'text' }, { text: 'category3', type: 'text' }, ]); - clearMocks(); + }); - str = 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 , cat3] \n '; + it('parse x-axis complete variant 2', () => { + const str = + 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 , cat3] \n '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ @@ -156,9 +185,11 @@ describe('Testing xychart jison file', () => { { text: 'cat2', type: 'text' }, { text: 'cat3', type: 'text' }, ]); - clearMocks(); + }); - str = 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 asdf , cat3] \n '; + it('parse x-axis complete variant 3', () => { + const str = + 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 asdf , cat3] \n '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ @@ -167,77 +198,61 @@ describe('Testing xychart jison file', () => { { text: 'cat3', type: 'text' }, ]); }); - it('parse y-axis', () => { - let str = 'xychart-beta \ny-axis yAxisName\n'; + + it('parse y-axis with axis name', () => { + const str = 'xychart-beta \ny-axis yAxisName\n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); - - clearMocks(); - - str = 'xychart-beta \ny-axis yAxisName \n'; + }); + it('parse y-axis with axis name with spaces', () => { + const str = 'xychart-beta \ny-axis yAxisName \n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); - - clearMocks(); - - str = 'xychart-beta \n y-axis "yAxisName has space"\n'; + }); + it('parse y-axis with axis name with "', () => { + const str = 'xychart-beta \n y-axis "yAxisName has space"\n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName has space', type: 'text', }); - - clearMocks(); - - str = 'xychart-beta \n y-axis " yAxisName has space " \n'; + }); + it('parse y-axis with axis name with " and spaces', () => { + const str = 'xychart-beta \n y-axis " yAxisName has space " \n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: ' yAxisName has space ', type: 'text', }); - - clearMocks(); - str = 'xychart-beta \ny-axis yAxisName 45.5 --> 33 \n'; + }); + it('parse y-axis with axis name with range data', () => { + const str = 'xychart-beta \ny-axis yAxisName 45.5 --> 33 \n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33); - - clearMocks(); - - str = 'xychart-beta \ny-axis yAxisName [ 45.3, 33 ] \n'; - expect(parserFnConstructor(str)).toThrow(); - - clearMocks(); - - str = 'xychart-beta \ny-axis yAxisName\n'; + }); + it('parse y-axis with axis name with range data with only decimal part', () => { + const str = 'xychart-beta \ny-axis yAxisName 45.5 --> .33 \n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 0.33); }); - it('parse both axis', () => { - let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n'; + it('parse y-axis throw error for invalid number in range data', () => { + const str = 'xychart-beta \ny-axis yAxisName 45.5 --> abc \n'; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse y-axis throws error if range data is passed', () => { + const str = 'xychart-beta \ny-axis yAxisName [ 45.3, 33 ] \n'; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse both axis at once', () => { + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); - - clearMocks(); - - str = 'xychart-beta \nx-axis xAxisName\n'; - expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ - text: 'xAxisName', - type: 'text', - }); - - clearMocks(); - - str = 'xychart-beta \ny-axis yAxisName'; - expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); - - clearMocks(); }); it('parse line Data', () => { - let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line lineTitle [23, 45, 56.6]'; + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line lineTitle [23, 45, 56.6]'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setLineData).toHaveBeenCalledWith( { text: 'lineTitle', type: 'text' }, @@ -245,10 +260,9 @@ describe('Testing xychart jison file', () => { ); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); - - clearMocks(); - - str = + }); + it('parse line Data with spaces and +,- symbols', () => { + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -45 , 56.6 ] '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); @@ -257,32 +271,58 @@ describe('Testing xychart jison file', () => { { text: 'lineTitle with space', type: 'text' }, [23, -45, 56.6] ); - - // set line data without title - str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line [ +23 , -45 , 56.6 ] '; + }); + it('parse line Data without title', () => { + const str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line [ +23 , -45 , 56.6 , .33] '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); - expect(mockDB.setLineData).toHaveBeenCalledWith({ text: '', type: 'text' }, [23, -45, 56.6]); - - clearMocks(); + expect(mockDB.setLineData).toHaveBeenCalledWith( + { text: '', type: 'text' }, + [23, -45, 56.6, 0.33] + ); + }); + it('parse line Data throws error unbalanced brackets', () => { + let str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 [ -45 , 56.6 ] '; + expect(parserFnConstructor(str)).toThrow(); str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -45 ] 56.6 ] '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse line Data throws error if data is not provided', () => { + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse line Data throws error if data is empty', () => { + const str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ ] '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse line Data throws error if , is not in proper', () => { + const str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , , -45 , 56.6 ] '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse line Data throws error if not number', () => { + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -4aa5 , 56.6 ] '; expect(parserFnConstructor(str)).toThrow(); }); it('parse bar Data', () => { - let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle [23, 45, 56.6]'; + const str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle [23, 45, 56.6, .22]'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setBarData).toHaveBeenCalledWith( { text: 'barTitle', type: 'text' }, - [23, 45, 56.6] + [23, 45, 56.6, 0.22] ); - - clearMocks(); - - str = + }); + it('parse bar Data spaces and +,- symbol', () => { + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -45 , 56.6 ] '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); @@ -291,22 +331,45 @@ describe('Testing xychart jison file', () => { { text: 'barTitle with space', type: 'text' }, [23, -45, 56.6] ); - clearMocks(); - - // set bar data without title - str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar [ +23 , -45 , 56.6 ] '; + }); + it('parse bar Data without plot title', () => { + const str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar [ +23 , -45 , 56.6 ] '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setBarData).toHaveBeenCalledWith({ text: '', type: 'text' }, [23, -45, 56.6]); clearMocks(); - + }); + it('parse bar should throw for unbalanced brackets', () => { + let str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 [ -45 , 56.6 ] '; + expect(parserFnConstructor(str)).toThrow(); str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -45 ] 56.6 ] '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse bar should throw error if data is not provided', () => { + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse bar should throw error if data is empty', () => { + const str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ ] '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse bar should throw error if comma is not proper', () => { + const str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , , -45 , 56.6 ] '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse bar should throw error if number is not passed', () => { + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -4aa5 , 56.6 ] '; expect(parserFnConstructor(str)).toThrow(); }); - it('parse multiple bar and line', () => { - let str = + it('parse multiple bar and line varient 1', () => { + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle1 [23, 45, 56.6] \n line lineTitle1 [11, 45.5, 67, 23] \n bar barTitle2 [13, 42, 56.89] \n line lineTitle2 [45, 99, 012]'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); @@ -327,9 +390,9 @@ describe('Testing xychart jison file', () => { { text: 'lineTitle2', type: 'text' }, [45, 99, 12] ); - clearMocks(); - - str = ` + }); + it('parse multiple bar and line varient 2', () => { + const str = ` xychart-beta horizontal title Basic xychart x-axis "this is x axis" [category1, "category 2", category3] diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 6023898ec2..2a768777f0 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -1,5 +1,6 @@ // @ts-ignore: TODO Fix ts errors import { adjust, channel } from 'khroma'; +import { Selection } from 'd3-selection'; import mermaidAPI from '../../mermaidAPI.js'; import * as configApi from '../../config.js'; import defaultConfig from '../../defaultConfig.js'; @@ -25,12 +26,30 @@ import { } from './chartBuilder/Interfaces.js'; import { getThemeVariables } from '../../themes/theme-default.js'; +export type SVGGType = Selection<SVGGElement, unknown, HTMLElement, any>; + const defaultThemeVariables = getThemeVariables(); const config = configApi.getConfig(); let plotIndex = 0; +let tmpSVGGElem: SVGGType; + +let xyChartConfig: XYChartConfig = getChartDefaultConfig(); +let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); +let xyChartData: XYChartData = getChartDefalutData(); +let plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor) + ? xyChartThemeConfig.plotBaseColor + : plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor); +let hasSetXAxis = false; +let hasSetYAxis = false; + +interface NormalTextType { + type: 'text'; + text: string; +} + function plotColorPaletteGenerator(baseColor: string, noOfColorNeeded = 15): string[] { const colors = []; const MAX_HUE_VALUE = 360; @@ -110,20 +129,6 @@ function getChartDefalutData(): XYChartData { }; } -let xyChartConfig: XYChartConfig = getChartDefaultConfig(); -let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); -let xyChartData: XYChartData = getChartDefalutData(); -let plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor) - ? xyChartThemeConfig.plotBaseColor - : plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor); -let hasSetXAxis = false; -let hasSetYAxis = false; - -interface NormalTextType { - type: 'text'; - text: string; -} - function textSanitizer(text: string) { return sanitizeText(text.trim(), config); } @@ -133,6 +138,9 @@ function parseDirective(statement: string, context: string, type: string) { mermaidAPI.parseDirective(this, statement, context, type); } +function setTmpSVGG(SVGG: SVGGType) { + tmpSVGGElem = SVGG; +} function setOrientation(oriantation: string) { if (oriantation === 'horizontal') { xyChartConfig.chartOrientation = 'horizontal'; @@ -177,7 +185,7 @@ function setYAxisRangeFromPlotData(data: number[]) { }; } -function transformDataWithOutCategory(data: number[]): SimplePlotDataType { +function transformDataWithoutCategory(data: number[]): SimplePlotDataType { let retData: SimplePlotDataType = []; if (data.length === 0) { return retData; @@ -214,7 +222,7 @@ function getPlotColorFromPalette(plotIndex: number): string { } function setLineData(title: NormalTextType, data: number[]) { - const plotData = transformDataWithOutCategory(data); + const plotData = transformDataWithoutCategory(data); xyChartData.plots.push({ type: 'line', strokeFill: getPlotColorFromPalette(plotIndex), @@ -225,7 +233,7 @@ function setLineData(title: NormalTextType, data: number[]) { } function setBarData(title: NormalTextType, data: number[]) { - const plotData = transformDataWithOutCategory(data); + const plotData = transformDataWithoutCategory(data); xyChartData.plots.push({ type: 'bar', fill: getPlotColorFromPalette(plotIndex), @@ -239,7 +247,7 @@ function getDrawableElem(): DrawableElem[] { throw Error('No Plot to render, please provide a plot with some data'); } xyChartData.title = getDiagramTitle(); - return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig); + return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig, tmpSVGGElem); } function setHeight(height: number) { @@ -283,4 +291,5 @@ export default { setYAxisRangeData, setLineData, setBarData, + setTmpSVGG, }; diff --git a/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts b/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts index 590ceed289..09bd51c2a4 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts @@ -8,5 +8,4 @@ export const diagram: DiagramDefinition = { parser, db, renderer, - styles: () => '', }; diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index 41d3b3ad52..b987bc7468 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -9,6 +9,7 @@ import { TextHorizontalPos, TextVerticalPos, } from './chartBuilder/Interfaces.js'; +import XYChartDB from './xychartDb.js'; export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { function getDominantBaseLine(horizontalPos: TextHorizontalPos) { @@ -46,13 +47,13 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram svg.attr('viewBox', '0 0 ' + width + ' ' + height); - // @ts-ignore: TODO Fix ts errors - diagObj.db.setHeight(height); - // @ts-ignore: TODO Fix ts errors - diagObj.db.setWidth(width); + const db = diagObj.db as typeof XYChartDB; - // @ts-ignore: TODO Fix ts errors - const shapes: DrawableElem[] = diagObj.db.getDrawableElem(); + db.setHeight(height); + db.setWidth(width); + db.setTmpSVGG(svg.append('g').attr('class', 'mermaid-tmp-group')); + + const shapes: DrawableElem[] = db.getDrawableElem(); const groups: Record<string, any> = {}; diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.js index 871f3425e2..417ee488cf 100644 --- a/packages/mermaid/src/rendering-util/createText.js +++ b/packages/mermaid/src/rendering-util/createText.js @@ -94,6 +94,22 @@ function computeWidthOfText(parentNode, lineHeight, text) { return textLength; } +/** + * Compute the width of rendered text + * @param {object} parentNode + * @param {number} lineHeight + * @param {string} text + * @returns {{width: number, height: number}} + */ +export function computeDimensionOfText(parentNode, lineHeight, text) { + const testElement = parentNode.append('text'); + const testSpan = createTspan(testElement, 1, lineHeight); + updateTextContentAndStyles(testSpan, [{ content: text, type: 'normal' }]); + const textDimension = testSpan.node().getBoundingClientRect(); + testElement.remove(); + return textDimension; +} + /** * Creates a formatted text element by breaking lines and applying styles based on * the given structuredText. From 2b4c2e4ca9bac31f602324cb1a02a916b26c92b2 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 20 Aug 2023 18:22:34 +0530 Subject: [PATCH 024/126] Fixed lint and used selectSvgElement --- packages/mermaid/src/diagrams/xychart/xychartDb.ts | 2 +- .../mermaid/src/diagrams/xychart/xychartRenderer.ts | 13 ++----------- packages/mermaid/src/rendering-util/createText.ts | 9 +-------- 3 files changed, 4 insertions(+), 20 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 2a768777f0..abdecfe281 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -26,7 +26,7 @@ import { } from './chartBuilder/Interfaces.js'; import { getThemeVariables } from '../../themes/theme-default.js'; -export type SVGGType = Selection<SVGGElement, unknown, HTMLElement, any>; +export type SVGGType = Selection<SVGGElement, unknown, Element | null, unknown>; const defaultThemeVariables = getThemeVariables(); diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index b987bc7468..6bade9ad2b 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -10,6 +10,7 @@ import { TextVerticalPos, } from './chartBuilder/Interfaces.js'; import XYChartDB from './xychartDb.js'; +import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { function getDominantBaseLine(horizontalPos: TextHorizontalPos) { @@ -23,20 +24,10 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram function getTextTransformation(data: TextElem) { return `translate(${data.x}, ${data.y}) rotate(${data.rotation || 0})`; } - const conf = configApi.getConfig(); log.debug('Rendering xychart chart\n' + txt); - const securityLevel = conf.securityLevel; - // Handle root and Document for when rendering in sandbox mode - let sandboxElement; - if (securityLevel === 'sandbox') { - sandboxElement = select('#i' + id); - } - const root = sandboxElement ? sandboxElement : select('body'); - - const svg = root.select(`[id="${id}"]`); - + const svg = selectSvgElement(id); const group = svg.append('g').attr('class', 'main'); const width = 700; diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts index 090b005c33..223fb25ad2 100644 --- a/packages/mermaid/src/rendering-util/createText.ts +++ b/packages/mermaid/src/rendering-util/createText.ts @@ -76,14 +76,7 @@ function computeWidthOfText(parentNode: any, lineHeight: number, line: MarkdownL return textLength; } -/** - * Compute the width of rendered text - * @param {object} parentNode - * @param {number} lineHeight - * @param {string} text - * @returns {{width: number, height: number}} - */ -export function computeDimensionOfText(parentNode, lineHeight, text) { +export function computeDimensionOfText(parentNode: any, lineHeight: number, text: string) { const testElement = parentNode.append('text'); const testSpan = createTspan(testElement, 1, lineHeight); updateTextContentAndStyles(testSpan, [{ content: text, type: 'normal' }]); From 54f2c63db14a2c9559bb088cdcc88c6c1169b20f Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Fri, 1 Sep 2023 20:57:05 +0530 Subject: [PATCH 025/126] Addressed all the new comment on jison --- .../src/diagrams/xychart/parser/xychart.jison | 104 +++++------------- .../xychart/parser/xychart.jison.spec.ts | 15 --- 2 files changed, 26 insertions(+), 93 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 7055327276..6c5cb92a9d 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -4,22 +4,14 @@ %x string %x md_string %x title -%x open_directive -%x type_directive -%x arg_directive -%x close_directive %x acc_title %x acc_descr %x acc_descr_multiline %s axis_data +%s axis_band_data %s data %s data_inner %% -\%\%\{ { this.pushState('open_directive'); return 'open_directive'; } -<open_directive>((?:(?!\}\%\%)[^:.])*) { this.pushState('type_directive'); return 'type_directive'; } -<type_directive>":" { this.popState(); this.pushState('arg_directive'); return ':'; } -<type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; } -<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive'; \%\%(?!\{)[^\n]* /* skip comments */ [^\}]\%\%[^\n]* /* skip comments */ <axis_data>(\r?\n) { this.popState(); return 'NEWLINE'; } @@ -34,38 +26,37 @@ "accDescr"\s*":"\s* { this.pushState("acc_descr");return 'acc_descr'; } <acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } "accDescr"\s*"{"\s* { this.pushState("acc_descr_multiline");} -<acc_descr_multiline>[\}] { this.popState(); } +<acc_descr_multiline>"{" { this.popState(); } <acc_descr_multiline>[^\}]* { return "acc_descr_multiline_value"; } "xychart-beta" {return 'XYCHART';} -("vertical"|"horizontal") {return 'CHART_ORIENTATION'} +(?:"vertical"|"horizontal") {return 'CHART_ORIENTATION'} "x-axis" { this.pushState("axis_data"); return "X_AXIS"; } "y-axis" { this.pushState("axis_data"); return "Y_AXIS"; } -<axis_data>[\[] { this.popState(); return 'SQUARE_BRACES_START'; } -<axis_data>[+-]?(?:\d+(?:\.\d+)?|\.\d+) { return 'NUMBER_WITH_DECIMAL'; } +<axis_data>"[" { this.pushState("axis_band_data"); return 'SQUARE_BRACES_START'; } <axis_data>"-->" { return 'ARROW_DELIMITER'; } "line" { this.pushState("data"); return 'LINE'; } "bar" { this.pushState("data"); return 'BAR'; } -<data>[\[] { this.pushState("data_inner"); return 'SQUARE_BRACES_START'; } -<data_inner>[+-]?(?:\d+(?:\.\d+)?|\.\d+) { return 'NUMBER_WITH_DECIMAL';} -<data_inner>[\]] { this.popState(); return 'SQUARE_BRACES_END'; } +<data>"[" { this.pushState("data_inner"); return 'SQUARE_BRACES_START'; } +<axis_data,data_inner>[+-]?(?:\d+(?:\.\d+)?|\.\d+) { return 'NUMBER_WITH_DECIMAL'; } +<data_inner,axis_band_data>"]" { this.popState(); return 'SQUARE_BRACES_END'; } -["][`] { this.pushState("md_string");} -<md_string>[^`"]+ { return "MD_STR";} -<md_string>[`]["] { this.popState();} +(?:"`) { this.pushState("md_string"); } +<md_string>(?:(?!`\").)+ { return "MD_STR"; } +<md_string>(?:`") { this.popState(); } ["] this.pushState("string"); <string>["] this.popState(); <string>[^"]* return "STR"; -[\[] return 'SQUARE_BRACES_START' -[\]] return 'SQUARE_BRACES_END' +"[" return 'SQUARE_BRACES_START' +"]" return 'SQUARE_BRACES_END' [A-Za-z]+ return 'ALPHA'; ":" return 'COLON'; \+ return 'PLUS'; @@ -90,7 +81,6 @@ start : eol start - | directive start | XYCHART chartConfig start | XYCHART start | document @@ -117,25 +107,14 @@ statement ; plotData - : SQUARE_BRACES_START commaSeperateNumber SQUARE_BRACES_END { $$ = $commaSeperateNumber } + : SQUARE_BRACES_START commaSeparatedNumbers SQUARE_BRACES_END { $$ = $commaSeparatedNumbers } ; -commaSeperateNumber - : NUMBER_WITH_DECIMAL commaSeperateNumberValues { - $commaSeperateNumberValues = $commaSeperateNumberValues || []; - $commaSeperateNumberValues.unshift(Number($NUMBER_WITH_DECIMAL)); - $$ = $commaSeperateNumberValues - } +commaSeparatedNumbers + : NUMBER_WITH_DECIMAL COMMA commaSeparatedNumbers { $$ = [Number($NUMBER_WITH_DECIMAL), ...$commaSeparatedNumbers] } + | NUMBER_WITH_DECIMAL { $$ = [Number($NUMBER_WITH_DECIMAL)] } ; -commaSeperateNumberValues - : COMMA NUMBER_WITH_DECIMAL commaSeperateNumberValues { - $commaSeperateNumberValues = $commaSeperateNumberValues || []; - $commaSeperateNumberValues.unshift(Number($NUMBER_WITH_DECIMAL)); - $$ = $commaSeperateNumberValues - } - |; - parseXAxis : text {yy.setXAxisTitle($text);} | text bandData {yy.setXAxisTitle($text); yy.setXAxisBand($bandData);} @@ -143,66 +122,35 @@ parseXAxis ; bandData - : SQUARE_BRACES_START commaSeperateText SQUARE_BRACES_END {$$ = $commaSeperateText} + : SQUARE_BRACES_START commaSeparatedTexts SQUARE_BRACES_END {$$ = $commaSeparatedTexts} ; -commaSeperateText - : text commaSeperateTextValues { - $commaSeperateTextValues = $commaSeperateTextValues || []; - $commaSeperateTextValues.unshift($text); - $$ = $commaSeperateTextValues - } +commaSeparatedTexts + : text COMMA commaSeparatedTexts { $$ = [$text, ...$commaSeparatedTexts] } + | text { $$ = [$text] } ; -commaSeperateTextValues - : COMMA text commaSeperateTextValues { - $commaSeperateTextValues = $commaSeperateTextValues || []; - $commaSeperateTextValues.unshift($text); - $$ = $commaSeperateTextValues - } - |; - parseYAxis : text {yy.setYAxisTitle($text);} | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setYAxisTitle($text); yy.setYAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));} ; -directive - : openDirective typeDirective closeDirective - | openDirective typeDirective ':' argDirective closeDirective - ; - eol : NEWLINE | SEMI | EOF ; -openDirective - : open_directive { yy.parseDirective('%%{', 'open_directive'); } - ; - -typeDirective - : type_directive { yy.parseDirective($1, 'type_directive'); } - ; - -argDirective - : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); } - ; - -closeDirective - : close_directive { yy.parseDirective('}%%', 'close_directive', 'xychart'); } - ; text: alphaNum { $$={text:$alphaNum, type: 'text'};} - | STR { $$={text: $STR, type: 'text'};} - | MD_STR { $$={text: $MD_STR, type: 'markdown'};} - ; + | STR { $$={text: $STR, type: 'text'};} + | MD_STR { $$={text: $MD_STR, type: 'markdown'};} + ; alphaNum - : alphaNumToken {$$=$alphaNumToken;} - | alphaNum alphaNumToken {$$=$alphaNum+''+$alphaNumToken;} - ; + : alphaNumToken {$$=$alphaNumToken;} + | alphaNum alphaNumToken {$$=$alphaNum+''+$alphaNumToken;} + ; alphaNumToken : AMP | NUM | ALPHA | PLUS | EQUALS | MULT | DOT | BRKT| MINUS | UNDERSCORE ; diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 446d225ec8..0515a4e944 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -9,7 +9,6 @@ const parserFnConstructor = (str: string) => { }; const mockDB: Record<string, Mock<any, any>> = { - parseDirective: vi.fn(), setOrientation: vi.fn(), setDiagramTitle: vi.fn(), setXAxisTitle: vi.fn(), @@ -54,19 +53,6 @@ describe('Testing xychart jison file', () => { expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('oneLinertitle'); }); - it('should be able to parse directive', () => { - const str = - '%%{init: {"xychart": {"chartWidth": 600, "chartHeight": 600} } }%% \n xychart-beta'; - expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.parseDirective.mock.calls[0]).toEqual(['%%{', 'open_directive']); - expect(mockDB.parseDirective.mock.calls[1]).toEqual(['init', 'type_directive']); - expect(mockDB.parseDirective.mock.calls[2]).toEqual([ - '{"xychart": {"chartWidth": 600, "chartHeight": 600} }', - 'arg_directive', - ]); - expect(mockDB.parseDirective.mock.calls[3]).toEqual(['}%%', 'close_directive', 'xychart']); - }); - it('parse chart orientation', () => { const str = 'xychart-beta vertical'; expect(parserFnConstructor(str)).not.toThrow(); @@ -339,7 +325,6 @@ describe('Testing xychart jison file', () => { expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setBarData).toHaveBeenCalledWith({ text: '', type: 'text' }, [23, -45, 56.6]); - clearMocks(); }); it('parse bar should throw for unbalanced brackets', () => { let str = From b2669aaca9b5854021adec8dfb5a083ff3b24782 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Fri, 1 Sep 2023 21:27:10 +0530 Subject: [PATCH 026/126] Fixed some space management issue --- demos/xychart.html | 15 ++++++++++++--- .../chartBuilder/components/axis/BaseAxis.ts | 11 ++++++++--- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index ad7bf0944d..a7bd426143 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -54,7 +54,16 @@ <h1>XY Charts demos</h1> title "Basic xychart with many categories" x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] y-axis yaxisText 10 --> 150 - bar "sample bat" [52, 96, 35, 10, 87, 34, 67, 99] + bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99] + </pre> + + <h1>XY Charts demos</h1> + <pre class="mermaid"> + xychart-beta + title "Line chart with many category" + x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] + y-axis yaxisText 10 --> 150 + line "sample line" [52, 96, 35, 10, 87, 34, 67, 99] </pre> <h1>XY Charts demos</h1> @@ -63,7 +72,7 @@ <h1>XY Charts demos</h1> title "Basic xychart with many categories with category overlap" x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7] y-axis yaxisText 10 --> 150 - bar "sample bat" [52, 96, 35, 10, 87, 34, 67, 99] + bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99] </pre> <hr /> @@ -72,7 +81,7 @@ <h1>XY Charts demos</h1> import mermaid from './mermaid.esm.mjs'; mermaid.initialize({ theme: 'default', - logLevel: 0, + logLevel: 3, securityLevel: 'loose', }); </script> diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index e695600e26..d076bc0a0e 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -11,6 +11,7 @@ import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { AxisPosition, Axis } from './index.js'; const BAR_WIDTH_TO_TICK_WIDTH_RATIO = 0.7; +const MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL = 0.2; export abstract class BaseAxis implements Axis { protected boundingRect: BoundingRect = { x: 0, y: 0, width: 0, height: 0 }; @@ -52,7 +53,8 @@ export abstract class BaseAxis implements Axis { abstract getTickValues(): Array<string | number>; getTickDistance(): number { - return Math.abs(this.range[0] - this.range[1]) / this.getTickValues().length; + const range = this.getRange(); + return Math.abs(range[0] - range[1]) / this.getTickValues().length; } getAxisOuterPadding(): number { @@ -77,7 +79,9 @@ export abstract class BaseAxis implements Axis { let availableHeight = availableSpace.height; if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); - this.outerPadding = spaceRequired.width / 2; + const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.width; + this.outerPadding = Math.min(spaceRequired.width / 2, maxPadding); + const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2; log.trace('height required for axis label: ', heightRequired); if (heightRequired <= availableHeight) { @@ -109,7 +113,8 @@ export abstract class BaseAxis implements Axis { let availableWidth = availableSpace.width; if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); - this.outerPadding = spaceRequired.height / 2; + const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.height; + this.outerPadding = Math.min(spaceRequired.height / 2, maxPadding); const widthRequired = spaceRequired.width + this.axisConfig.labelPadding * 2; log.trace('width required for axis label: ', widthRequired); if (widthRequired <= availableWidth) { From 7bdf4c3dbb531a4db30d7bdabc991dc283535ce3 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 2 Sep 2023 13:03:30 +0530 Subject: [PATCH 027/126] Added themes config to all the themes --- .../xychart/chartBuilder/Interfaces.ts | 3 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 46 ++++++------------- .../src/diagrams/xychart/xychartRenderer.ts | 19 ++++---- packages/mermaid/src/themes/theme-base.js | 25 ++++++++++ packages/mermaid/src/themes/theme-dark.js | 25 ++++++++++ packages/mermaid/src/themes/theme-default.js | 13 +++++- packages/mermaid/src/themes/theme-forest.js | 25 ++++++++++ packages/mermaid/src/themes/theme-neutral.js | 25 ++++++++++ 8 files changed, 139 insertions(+), 42 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 32cd14d635..2c92470870 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -5,6 +5,7 @@ export interface XYChartAxisThemeConfig { } export interface XYChartThemeConfig { + backgroundColor: string; titleColor: string; axisLineColor: string; xAxisLableColor: string; @@ -13,7 +14,7 @@ export interface XYChartThemeConfig { yAxisLableColor: string; yAxisTitleColor: string; yAxisTickColor: string; - plotBaseColor: string; + plotColorPalette: string; } export interface ChartComponent { diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index abdecfe281..4553762668 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -39,9 +39,7 @@ let tmpSVGGElem: SVGGType; let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); let xyChartData: XYChartData = getChartDefalutData(); -let plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor) - ? xyChartThemeConfig.plotBaseColor - : plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor); +let plotColorPalette = xyChartThemeConfig.plotColorPalette; let hasSetXAxis = false; let hasSetYAxis = false; @@ -50,26 +48,11 @@ interface NormalTextType { text: string; } -function plotColorPaletteGenerator(baseColor: string, noOfColorNeeded = 15): string[] { - const colors = []; - const MAX_HUE_VALUE = 360; - const baseHue = channel(baseColor, 'h'); - if (baseHue > MAX_HUE_VALUE / 2) { - const decr = Math.floor(baseHue / noOfColorNeeded); - for (let i = 0; i <= baseHue; i += decr) { - colors.push(adjust(baseColor, { h: -i })); - } - } else { - const incr = Math.floor((MAX_HUE_VALUE - baseHue) / noOfColorNeeded); - for (let i = 0; i <= baseHue; i += incr) { - colors.push(adjust(baseColor, { h: i })); - } - } - return colors; -} - function getChartDefaultThemeConfig(): XYChartThemeConfig { return { + backgroundColor: + config.themeVariables?.xyChart?.backgroundColor || + defaultThemeVariables.xyChart.backgroundColor, titleColor: config.themeVariables?.xyChart?.titleColor || defaultThemeVariables.xyChart.titleColor, axisLineColor: @@ -92,8 +75,9 @@ function getChartDefaultThemeConfig(): XYChartThemeConfig { yAxisTickColor: config.themeVariables?.xyChart?.yAxisTickColor || defaultThemeVariables.xyChart.yAxisTickColor, - plotBaseColor: - config.themeVariables?.xyChart?.plotBaseColor || defaultThemeVariables.xyChart.plotBaseColor, + plotColorPalette: + config.themeVariables?.xyChart?.plotColorPalette || + defaultThemeVariables.xyChart.plotColorPalette, }; } function getChartDefaultConfig(): XYChartConfig { @@ -250,12 +234,12 @@ function getDrawableElem(): DrawableElem[] { return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig, tmpSVGGElem); } -function setHeight(height: number) { - xyChartConfig.height = height; +function getChartThemeConfig() { + return xyChartThemeConfig; } -function setWidth(width: number) { - xyChartConfig.width = width; +function getChartConfig() { + return xyChartConfig; } const clear = function () { @@ -264,16 +248,12 @@ const clear = function () { xyChartConfig = getChartDefaultConfig(); xyChartData = getChartDefalutData(); xyChartThemeConfig = getChartDefaultThemeConfig(); - plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor) - ? xyChartThemeConfig.plotBaseColor - : plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor); + plotColorPalette = xyChartThemeConfig.plotColorPalette; hasSetXAxis = false; hasSetYAxis = false; }; export default { - setWidth, - setHeight, getDrawableElem, parseDirective, clear, @@ -292,4 +272,6 @@ export default { setLineData, setBarData, setTmpSVGG, + getChartThemeConfig, + getChartConfig, }; diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index 6bade9ad2b..384cf944b5 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -13,6 +13,9 @@ import XYChartDB from './xychartDb.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { + const db = diagObj.db as typeof XYChartDB; + const themeConfig = db.getChartThemeConfig(); + const chartConfig = db.getChartConfig(); function getDominantBaseLine(horizontalPos: TextHorizontalPos) { return horizontalPos === 'top' ? 'hanging' : 'middle'; } @@ -29,19 +32,19 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram const svg = selectSvgElement(id); const group = svg.append('g').attr('class', 'main'); - - const width = 700; - const height = 500; + const background = group + .append('rect') + .attr('width', chartConfig.width) + .attr('height', chartConfig.height) + .attr('class', 'background'); // @ts-ignore: TODO Fix ts errors - configureSvgSize(svg, height, width, true); + configureSvgSize(svg, chartConfig.height, chartConfig.width, true); - svg.attr('viewBox', '0 0 ' + width + ' ' + height); + svg.attr('viewBox', '0 0 ' + chartConfig.width + ' ' + chartConfig.height); - const db = diagObj.db as typeof XYChartDB; + background.attr('fill', themeConfig.backgroundColor); - db.setHeight(height); - db.setWidth(width); db.setTmpSVGG(svg.append('g').attr('class', 'mermaid-tmp-group')); const shapes: DrawableElem[] = db.getDrawableElem(); diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js index ce1700d0b0..90d5b1446f 100644 --- a/packages/mermaid/src/themes/theme-base.js +++ b/packages/mermaid/src/themes/theme-base.js @@ -245,6 +245,31 @@ class Theme { this.quadrantExternalBorderStrokeFill || this.primaryBorderColor; this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor; + /* xychart */ + this.xyChart = { + backgroundColor: this.xyChart?.backgroundColor || this.background, + titleColor: this.xyChart?.titleColor || this.primaryTextColor, + axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, + xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, + xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, + yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + plotColorPalette: this.xyChart?.plotColorPalette || [ + '#FFF4DD', + '#FFD8B1', + '#FFA07A', + '#ECEFF1', + '#D6DBDF', + '#C3E0A8', + '#FFB6A4', + '#FFD74D', + '#738FA7', + '#FFFFF0', + ], + }; + /* requirement-diagram */ this.requirementBackground = this.requirementBackground || this.primaryColor; this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor; diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js index fd083e5132..301255e0e4 100644 --- a/packages/mermaid/src/themes/theme-dark.js +++ b/packages/mermaid/src/themes/theme-dark.js @@ -251,6 +251,31 @@ class Theme { this.quadrantExternalBorderStrokeFill || this.primaryBorderColor; this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor; + /* xychart */ + this.xyChart = { + backgroundColor: this.xyChart?.backgroundColor || this.background, + titleColor: this.xyChart?.titleColor || this.primaryTextColor, + axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, + xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, + xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, + yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + plotColorPalette: this.xyChart?.plotColorPalette || [ + '#3498db', + '#2ecc71', + '#e74c3c', + '#f1c40f', + '#bdc3c7', + '#ffffff', + '#34495e', + '#9b59b6', + '#1abc9c', + '#e67e22', + ], + }; + /* class */ this.classText = this.primaryTextColor; diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index c95d44371f..e95755947b 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -283,7 +283,18 @@ class Theme { yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, - plotBaseColor: this.xyChart?.plotBaseColor || darken(this.primaryColor, 25), + plotColorPalette: this.xyChart?.plotColorPalette || [ + '#ECECFF', + '#8493A6', + '#FFC3A0', + '#DCDDE1', + '#B8E994', + '#D1A36F', + '#C3CDE6', + '#FFB6C1', + '#496078', + '#F8F3E3', + ], }; /* requirement-diagram */ diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js index 65797b00c4..3cdcdbdcef 100644 --- a/packages/mermaid/src/themes/theme-forest.js +++ b/packages/mermaid/src/themes/theme-forest.js @@ -240,6 +240,31 @@ class Theme { this.quadrantExternalBorderStrokeFill || this.primaryBorderColor; this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor; + /* xychart */ + this.xyChart = { + backgroundColor: this.xyChart?.backgroundColor || this.background, + titleColor: this.xyChart?.titleColor || this.primaryTextColor, + axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, + xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, + xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, + yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + plotColorPalette: this.xyChart?.plotColorPalette || [ + '#CDE498', + '#FF6B6B', + '#A0D2DB', + '#D7BDE2', + '#F0F0F0', + '#FFC3A0', + '#7FD8BE', + '#FF9A8B', + '#FAF3E0', + '#FFF176', + ], + }; + /* requirement-diagram */ this.requirementBackground = this.requirementBackground || this.primaryColor; this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor; diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js index 963ce031d1..dbde17d98c 100644 --- a/packages/mermaid/src/themes/theme-neutral.js +++ b/packages/mermaid/src/themes/theme-neutral.js @@ -271,6 +271,31 @@ class Theme { this.quadrantExternalBorderStrokeFill || this.primaryBorderColor; this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor; + /* xychart */ + this.xyChart = { + backgroundColor: this.xyChart?.backgroundColor || this.background, + titleColor: this.xyChart?.titleColor || this.primaryTextColor, + axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, + xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, + xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, + yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + plotColorPalette: this.xyChart?.plotColorPalette || [ + '#EEE', + '#6BB8E4', + '#8ACB88', + '#C7ACD6', + '#E8DCC2', + '#FFB2A8', + '#FFF380', + '#7E8D91', + '#FFD8B1', + '#FAF3E0', + ], + }; + /* requirement-diagram */ this.requirementBackground = this.requirementBackground || this.primaryColor; this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor; From f9a91730aa7df78986b1194a5e286de65e1279b8 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 2 Sep 2023 15:45:30 +0530 Subject: [PATCH 028/126] Small minor changes --- .../xychart/chartBuilder/Orchestrator.ts | 52 +++++++++---------- .../chartBuilder/components/plot/BarPlot.ts | 4 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 36 ++----------- 3 files changed, 33 insertions(+), 59 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index e18eb92a31..2788697866 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -22,8 +22,8 @@ export class Orchestrator { constructor( private chartConfig: XYChartConfig, private chartData: XYChartData, - private chartThemeConfig: XYChartThemeConfig, - private tmpSVGGElem: SVGGType + chartThemeConfig: XYChartThemeConfig, + tmpSVGGElem: SVGGType ) { this.componentStore = { title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGElem), @@ -54,8 +54,8 @@ export class Orchestrator { private calculateVerticalSpace() { let availableWidth = this.chartConfig.width; let availableHeight = this.chartConfig.height; - let chartX = 0; - let chartY = 0; + let plotX = 0; + let plotY = 0; let chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100); let chartHeight = Math.floor( (availableHeight * this.chartConfig.plotReservedSpacePercent) / 100 @@ -72,7 +72,7 @@ export class Orchestrator { height: availableHeight, }); log.trace('space used by title: ', spaceUsed); - chartY = spaceUsed.height; + plotY = spaceUsed.height; availableHeight -= spaceUsed.height; this.componentStore.xAxis.setAxisPosition('bottom'); spaceUsed = this.componentStore.xAxis.calculateSpace({ @@ -87,7 +87,7 @@ export class Orchestrator { height: availableHeight, }); log.trace('space used by yaxis: ', spaceUsed); - chartX = spaceUsed.width; + plotX = spaceUsed.width; availableWidth -= spaceUsed.width; if (availableWidth > 0) { chartWidth += availableWidth; @@ -98,8 +98,8 @@ export class Orchestrator { availableHeight = 0; } const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; - chartX += plotBorderWidthHalf; - chartY += plotBorderWidthHalf; + plotX += plotBorderWidthHalf; + plotY += plotBorderWidthHalf; chartWidth -= this.chartConfig.plotBorderWidth; chartHeight -= this.chartConfig.plotBorderWidth; this.componentStore.plot.calculateSpace({ @@ -108,14 +108,14 @@ export class Orchestrator { }); log.trace( - `Final chart dimansion: x = ${chartX}, y = ${chartY}, width = ${chartWidth}, height = ${chartHeight}` + `Final chart dimansion: x = ${plotX}, y = ${plotY}, width = ${chartWidth}, height = ${chartHeight}` ); - this.componentStore.plot.setBoundingBoxXY({ x: chartX, y: chartY }); - this.componentStore.xAxis.setRange([chartX, chartX + chartWidth]); - this.componentStore.xAxis.setBoundingBoxXY({ x: chartX, y: chartY + chartHeight }); - this.componentStore.yAxis.setRange([chartY, chartY + chartHeight]); - this.componentStore.yAxis.setBoundingBoxXY({ x: 0, y: chartY }); + this.componentStore.plot.setBoundingBoxXY({ x: plotX, y: plotY }); + this.componentStore.xAxis.setRange([plotX, plotX + chartWidth]); + this.componentStore.xAxis.setBoundingBoxXY({ x: plotX, y: plotY + chartHeight }); + this.componentStore.yAxis.setRange([plotY, plotY + chartHeight]); + this.componentStore.yAxis.setBoundingBoxXY({ x: 0, y: plotY }); if (this.chartData.plots.some((p) => isBarPlot(p))) { this.componentStore.xAxis.recalculateOuterPaddingToDrawBar(); } @@ -125,8 +125,8 @@ export class Orchestrator { let availableWidth = this.chartConfig.width; let availableHeight = this.chartConfig.height; let titleYEnd = 0; - let chartX = 0; - let chartY = 0; + let plotX = 0; + let plotY = 0; let chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100); let chartHeight = Math.floor( (availableHeight * this.chartConfig.plotReservedSpacePercent) / 100 @@ -151,7 +151,7 @@ export class Orchestrator { height: availableHeight, }); availableWidth -= spaceUsed.width; - chartX = spaceUsed.width; + plotX = spaceUsed.width; log.trace('space used by xaxis: ', spaceUsed); this.componentStore.yAxis.setAxisPosition('top'); spaceUsed = this.componentStore.yAxis.calculateSpace({ @@ -160,7 +160,7 @@ export class Orchestrator { }); log.trace('space used by yaxis: ', spaceUsed); availableHeight -= spaceUsed.height; - chartY = titleYEnd + spaceUsed.height; + plotY = titleYEnd + spaceUsed.height; if (availableWidth > 0) { chartWidth += availableWidth; availableWidth = 0; @@ -170,8 +170,8 @@ export class Orchestrator { availableHeight = 0; } const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; - chartX += plotBorderWidthHalf; - chartY += plotBorderWidthHalf; + plotX += plotBorderWidthHalf; + plotY += plotBorderWidthHalf; chartWidth -= this.chartConfig.plotBorderWidth; chartHeight -= this.chartConfig.plotBorderWidth; this.componentStore.plot.calculateSpace({ @@ -180,14 +180,14 @@ export class Orchestrator { }); log.trace( - `Final chart dimansion: x = ${chartX}, y = ${chartY}, width = ${chartWidth}, height = ${chartHeight}` + `Final chart dimansion: x = ${plotX}, y = ${plotY}, width = ${chartWidth}, height = ${chartHeight}` ); - this.componentStore.plot.setBoundingBoxXY({ x: chartX, y: chartY }); - this.componentStore.yAxis.setRange([chartX, chartX + chartWidth]); - this.componentStore.yAxis.setBoundingBoxXY({ x: chartX, y: titleYEnd }); - this.componentStore.xAxis.setRange([chartY, chartY + chartHeight]); - this.componentStore.xAxis.setBoundingBoxXY({ x: 0, y: chartY }); + this.componentStore.plot.setBoundingBoxXY({ x: plotX, y: plotY }); + this.componentStore.yAxis.setRange([plotX, plotX + chartWidth]); + this.componentStore.yAxis.setBoundingBoxXY({ x: plotX, y: titleYEnd }); + this.componentStore.xAxis.setRange([plotY, plotY + chartHeight]); + this.componentStore.xAxis.setBoundingBoxXY({ x: 0, y: plotY }); if (this.chartData.plots.some((p) => isBarPlot(p))) { this.componentStore.xAxis.recalculateOuterPaddingToDrawBar(); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index 20d1af3112..b0a62df1f8 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -17,11 +17,11 @@ export class BarPlot { this.yAxis.getScaleValue(d[1]), ]); - const barPaddingPercent = 5; + const barPaddingPercent = 0.05; const barWidth = Math.min(this.xAxis.getAxisOuterPadding() * 2, this.xAxis.getTickDistance()) * - (1 - barPaddingPercent / 100); + (1 - barPaddingPercent); const barWidthHalf = barWidth / 2; if (this.orientation === 'horizontal') { diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 4553762668..80d6ae635f 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -50,47 +50,21 @@ interface NormalTextType { function getChartDefaultThemeConfig(): XYChartThemeConfig { return { - backgroundColor: - config.themeVariables?.xyChart?.backgroundColor || - defaultThemeVariables.xyChart.backgroundColor, - titleColor: - config.themeVariables?.xyChart?.titleColor || defaultThemeVariables.xyChart.titleColor, - axisLineColor: - config.themeVariables?.xyChart?.axisLineColor || defaultThemeVariables.xyChart.axisLineColor, - xAxisLableColor: - config.themeVariables?.xyChart?.xAxisLableColor || - defaultThemeVariables.xyChart.xAxisLableColor, - xAxisTitleColor: - config.themeVariables?.xyChart?.xAxisTitleColor || - defaultThemeVariables.xyChart.xAxisTitleColor, - xAxisTickColor: - config.themeVariables?.xyChart?.xAxisTickColor || - defaultThemeVariables.xyChart.xAxisTickColor, - yAxisLableColor: - config.themeVariables?.xyChart?.yAxisLableColor || - defaultThemeVariables.xyChart.yAxisLableColor, - yAxisTitleColor: - config.themeVariables?.xyChart?.yAxisTitleColor || - defaultThemeVariables.xyChart.yAxisTitleColor, - yAxisTickColor: - config.themeVariables?.xyChart?.yAxisTickColor || - defaultThemeVariables.xyChart.yAxisTickColor, - plotColorPalette: - config.themeVariables?.xyChart?.plotColorPalette || - defaultThemeVariables.xyChart.plotColorPalette, + ...defaultThemeVariables.xyChart, + ...config.themeVariables?.xyChart, }; } function getChartDefaultConfig(): XYChartConfig { return { ...(defaultConfig.xyChart as XYChartConfig), - ...(config.xyChart ? config.xyChart : {}), + ...config.xyChart, yAxis: { ...(defaultConfig.xyChart as XYChartConfig).yAxis, - ...(config.xyChart?.yAxis ? config.xyChart.yAxis : {}), + ...config.xyChart?.yAxis, }, xAxis: { ...(defaultConfig.xyChart as XYChartConfig).xAxis, - ...(config.xyChart?.xAxis ? config.xyChart.xAxis : {}), + ...config.xyChart?.xAxis, }, }; } From de2aa9d7402d864c996453a85fdc41f52bca2f36 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 2 Sep 2023 16:33:29 +0530 Subject: [PATCH 029/126] Fixed lint issue --- .../xychart/chartBuilder/Orchestrator.ts | 19 ++++++++----------- .../chartBuilder/TextDimensionCalculator.ts | 4 ++-- .../chartBuilder/components/ChartTitle.ts | 10 ++++------ .../chartBuilder/components/axis/BandAxis.ts | 7 ++++--- .../chartBuilder/components/axis/BaseAxis.ts | 6 +++--- .../components/axis/LinearAxis.ts | 7 ++++--- .../chartBuilder/components/axis/index.ts | 6 +++--- .../chartBuilder/components/plot/BarPlot.ts | 4 ++-- .../chartBuilder/components/plot/LinePlot.ts | 4 ++-- .../components/plot/PlotBorder.ts | 7 ++++++- .../chartBuilder/components/plot/index.ts | 6 +++--- .../diagrams/xychart/chartBuilder/index.ts | 4 ++-- .../xychart/parser/xychart.jison.spec.ts | 3 ++- .../mermaid/src/diagrams/xychart/xychartDb.ts | 7 +++---- .../src/diagrams/xychart/xychartDiagram.ts | 2 +- .../src/diagrams/xychart/xychartRenderer.ts | 10 ++++------ 16 files changed, 53 insertions(+), 53 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index 2788697866..b89d1c94e4 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,16 +1,13 @@ import { log } from '../../../logger.js'; -import { - DrawableElem, - XYChartData, - XYChartThemeConfig, - XYChartConfig, - isBarPlot, -} from './Interfaces.js'; +import type { DrawableElem, XYChartData, XYChartThemeConfig, XYChartConfig } from './Interfaces.js'; +import { isBarPlot } from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; -import { ChartComponent } from './Interfaces.js'; -import { Axis, getAxis } from './components/axis/index.js'; -import { Plot, getPlotComponent } from './components/plot/index.js'; -import { SVGGType } from '../xychartDb.js'; +import type { ChartComponent } from './Interfaces.js'; +import type { Axis } from './components/axis/index.js'; +import { getAxis } from './components/axis/index.js'; +import type { Plot } from './components/plot/index.js'; +import { getPlotComponent } from './components/plot/index.js'; +import type { SVGGType } from '../xychartDb.js'; export class Orchestrator { private componentStore: { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts index 02d8413225..2fd2d770e7 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts @@ -1,6 +1,6 @@ -import { Dimension } from './Interfaces.js'; +import type { Dimension } from './Interfaces.js'; import { computeDimensionOfText } from '../../../rendering-util/createText.js'; -import { SVGGType } from '../xychartDb.js'; +import type { SVGGType } from '../xychartDb.js'; export interface TextDimensionCalculator { getMaxDimension(texts: string[], fontSize: number): Dimension; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 6b3ec3c108..7a5bcf3416 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -1,5 +1,5 @@ -import { SVGGType } from '../../xychartDb.js'; -import { +import type { SVGGType } from '../../xychartDb.js'; +import type { BoundingRect, ChartComponent, Dimension, @@ -9,10 +9,8 @@ import { XYChartThemeConfig, XYChartConfig, } from '../Interfaces.js'; -import { - TextDimensionCalculator, - TextDimensionCalculatorWithFont, -} from '../TextDimensionCalculator.js'; +import type { TextDimensionCalculator } from '../TextDimensionCalculator.js'; +import { TextDimensionCalculatorWithFont } from '../TextDimensionCalculator.js'; export class ChartTitle implements ChartComponent { private boundingRect: BoundingRect; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts index e55f819536..8c785cf72b 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts @@ -1,8 +1,9 @@ -import { ScaleBand, scaleBand } from 'd3'; +import type { ScaleBand } from 'd3'; +import { scaleBand } from 'd3'; import { log } from '../../../../../logger.js'; -import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; -import { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; +import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; export class BandAxis extends BaseAxis { private scale: ScaleBand<string>; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index d076bc0a0e..977bf4e200 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -1,5 +1,5 @@ import { log } from '../../../../../logger.js'; -import { +import type { BoundingRect, Dimension, DrawableElem, @@ -7,8 +7,8 @@ import { XYChartAxisThemeConfig, XYChartAxisConfig, } from '../../Interfaces.js'; -import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; -import { AxisPosition, Axis } from './index.js'; +import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import type { AxisPosition, Axis } from './index.js'; const BAR_WIDTH_TO_TICK_WIDTH_RATIO = 0.7; const MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL = 0.2; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index f32585a6c7..6f0e2bdbb6 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -1,8 +1,9 @@ -import { ScaleLinear, scaleLinear } from 'd3'; +import type { ScaleLinear } from 'd3'; +import { scaleLinear } from 'd3'; import { log } from '../../../../../logger.js'; -import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; -import { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; +import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; export class LinearAxis extends BaseAxis { private scale: ScaleLinear<number, number>; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index a40de82377..a563ad6864 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,11 +1,11 @@ -import { SVGGType } from '../../../xychartDb.js'; -import { +import type { SVGGType } from '../../../xychartDb.js'; +import type { AxisDataType, ChartComponent, XYChartAxisThemeConfig, XYChartAxisConfig, - isBandAxisData, } from '../../Interfaces.js'; +import { isBandAxisData } from '../../Interfaces.js'; import { TextDimensionCalculatorWithFont } from '../../TextDimensionCalculator.js'; import { BandAxis } from './BandAxis.js'; import { LinearAxis } from './LinearAxis.js'; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index b0a62df1f8..e6b2e66e9f 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,5 +1,5 @@ -import { BarPlotData, BoundingRect, DrawableElem, XYChartConfig } from '../../Interfaces.js'; -import { Axis } from '../axis/index.js'; +import type { BarPlotData, BoundingRect, DrawableElem, XYChartConfig } from '../../Interfaces.js'; +import type { Axis } from '../axis/index.js'; export class BarPlot { constructor( diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index fe58b1ef46..e4ab886ea7 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -1,6 +1,6 @@ import { line } from 'd3'; -import { DrawableElem, LinePlotData, XYChartConfig } from '../../Interfaces.js'; -import { Axis } from '../axis/index.js'; +import type { DrawableElem, LinePlotData, XYChartConfig } from '../../Interfaces.js'; +import type { Axis } from '../axis/index.js'; export class LinePlot { constructor( diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts index c87165d405..3870f48e6b 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts @@ -1,4 +1,9 @@ -import { BoundingRect, DrawableElem, XYChartConfig, XYChartThemeConfig } from '../../Interfaces.js'; +import type { + BoundingRect, + DrawableElem, + XYChartConfig, + XYChartThemeConfig, +} from '../../Interfaces.js'; export class PlotBorder { constructor( private boundingRect: BoundingRect, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index e974da0e8a..027ba7c7a1 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -1,4 +1,4 @@ -import { +import type { XYChartData, Dimension, BoundingRect, @@ -7,8 +7,8 @@ import { XYChartThemeConfig, XYChartConfig, } from '../../Interfaces.js'; -import { Axis } from '../axis/index.js'; -import { ChartComponent } from '../../Interfaces.js'; +import type { Axis } from '../axis/index.js'; +import type { ChartComponent } from '../../Interfaces.js'; import { LinePlot } from './LinePlot.js'; import { PlotBorder } from './PlotBorder.js'; import { BarPlot } from './BarPlot.js'; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 2b308be2b0..356f0b4522 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -1,6 +1,6 @@ import { log } from '../../../logger.js'; -import { SVGGType } from '../xychartDb.js'; -import { DrawableElem, XYChartData, XYChartConfig, XYChartThemeConfig } from './Interfaces.js'; +import type { SVGGType } from '../xychartDb.js'; +import type { DrawableElem, XYChartData, XYChartConfig, XYChartThemeConfig } from './Interfaces.js'; import { Orchestrator } from './Orchestrator.js'; export class XYChartBuilder { diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 0515a4e944..09a62d8bd1 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -1,6 +1,7 @@ // @ts-ignore: TODO Fix ts errors import { parser } from './xychart.jison'; -import { Mock, vi } from 'vitest'; +import type { Mock } from 'vitest'; +import { vi } from 'vitest'; const parserFnConstructor = (str: string) => { return () => { diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 80d6ae635f..b8c7dd0a28 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -1,6 +1,6 @@ // @ts-ignore: TODO Fix ts errors import { adjust, channel } from 'khroma'; -import { Selection } from 'd3-selection'; +import type { Selection } from 'd3-selection'; import mermaidAPI from '../../mermaidAPI.js'; import * as configApi from '../../config.js'; import defaultConfig from '../../defaultConfig.js'; @@ -15,15 +15,14 @@ import { clear as commonClear, } from '../../commonDb.js'; import { XYChartBuilder } from './chartBuilder/index.js'; -import { +import type { DrawableElem, SimplePlotDataType, XYChartData, XYChartThemeConfig, - isBandAxisData, - isLinearAxisData, XYChartConfig, } from './chartBuilder/Interfaces.js'; +import { isBandAxisData, isLinearAxisData } from './chartBuilder/Interfaces.js'; import { getThemeVariables } from '../../themes/theme-default.js'; export type SVGGType = Selection<SVGGElement, unknown, Element | null, unknown>; diff --git a/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts b/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts index 09bd51c2a4..c4e913adc3 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts @@ -1,4 +1,4 @@ -import { DiagramDefinition } from '../../diagram-api/types.js'; +import type { DiagramDefinition } from '../../diagram-api/types.js'; // @ts-ignore: TODO Fix ts errors import parser from './parser/xychart.jison'; import db from './xychartDb.js'; diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index 384cf944b5..8f999cb00c 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -1,15 +1,13 @@ -import { select } from 'd3'; -import { Diagram } from '../../Diagram.js'; -import * as configApi from '../../config.js'; +import type { Diagram } from '../../Diagram.js'; import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; -import { +import type { DrawableElem, TextElem, TextHorizontalPos, TextVerticalPos, } from './chartBuilder/Interfaces.js'; -import XYChartDB from './xychartDb.js'; +import type XYChartDB from './xychartDb.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { @@ -54,7 +52,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram function getGroup(gList: string[]) { let elem = group; let prefix = ''; - for (const [i, _] of gList.entries()) { + for (const [i] of gList.entries()) { let parent = group; if (i > 0 && groups[prefix]) { parent = groups[prefix]; From e0418eb661488debb95f706ab36e5a5223011ae0 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 2 Sep 2023 18:08:59 +0530 Subject: [PATCH 030/126] Made the axis title optional --- demos/xychart.html | 13 ++++++-- .../chartBuilder/components/axis/BaseAxis.ts | 4 +-- .../src/diagrams/xychart/parser/xychart.jison | 22 +++++++++---- .../xychart/parser/xychart.jison.spec.ts | 32 +++++++++++++++++++ 4 files changed, 61 insertions(+), 10 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index a7bd426143..42992dd257 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -15,6 +15,17 @@ <body> <h1>XY Charts demos</h1> + <pre class="mermaid"> + xychart-beta + title "Sales Revenue (in $)" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + </pre> + + <hr /> + <pre class="mermaid"> xychart-beta horizontal title "Basic xychart" @@ -24,8 +35,6 @@ <h1>XY Charts demos</h1> line [23, 46, 75, 43] </pre> - <hr /> - <h1>XY Charts demos</h1> <pre class="mermaid"> xychart-beta diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index 977bf4e200..7bbaf57491 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -93,7 +93,7 @@ export abstract class BaseAxis implements Axis { this.showTick = true; availableHeight -= this.axisConfig.tickLength; } - if (this.axisConfig.showTitle) { + if (this.axisConfig.showTitle && this.title) { const spaceRequired = this.textDimensionCalculator.getMaxDimension( [this.title], this.axisConfig.labelFontSize @@ -126,7 +126,7 @@ export abstract class BaseAxis implements Axis { this.showTick = true; availableWidth -= this.axisConfig.tickLength; } - if (this.axisConfig.showTitle) { + if (this.axisConfig.showTitle && this.title) { const spaceRequired = this.textDimensionCalculator.getMaxDimension( [this.title], this.axisConfig.labelFontSize diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 6c5cb92a9d..8666dda3b4 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -55,8 +55,8 @@ <string>[^"]* return "STR"; -"[" return 'SQUARE_BRACES_START' -"]" return 'SQUARE_BRACES_END' +"[" return 'SQUARE_BRACES_START' +"]" return 'SQUARE_BRACES_END' [A-Za-z]+ return 'ALPHA'; ":" return 'COLON'; \+ return 'PLUS'; @@ -117,8 +117,13 @@ commaSeparatedNumbers parseXAxis : text {yy.setXAxisTitle($text);} - | text bandData {yy.setXAxisTitle($text); yy.setXAxisBand($bandData);} - | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setXAxisTitle($text); yy.setXAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));} + | text xAxisData {yy.setXAxisTitle($text);} + | xAxisData {yy.setXAxisTitle({type: 'text', text: ''});} + ; + +xAxisData + : bandData {yy.setXAxisBand($bandData);} + | NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setXAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));} ; bandData @@ -131,8 +136,13 @@ commaSeparatedTexts ; parseYAxis - : text {yy.setYAxisTitle($text);} - | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setYAxisTitle($text); yy.setYAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));} + : text {yy.setYAxisTitle($text);} + | text yAxisData {yy.setYAxisTitle($text);} + | yAxisData {yy.setYAxisTitle({type: "text", text: ""});} + ; + +yAxisData + : NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setYAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));} ; eol diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 09a62d8bd1..6ccc06c584 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -128,6 +128,16 @@ describe('Testing xychart jison file', () => { expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 0.34); }); + it('parse x-axis without axisname and range data', () => { + const str = 'xychart-beta \nx-axis 45.5 --> 1.34 \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: '', + type: 'text', + }); + expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 1.34); + }); + it('parse x-axis with axis name and category data', () => { const str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] \n '; expect(parserFnConstructor(str)).not.toThrow(); @@ -144,6 +154,22 @@ describe('Testing xychart jison file', () => { ]); }); + it('parse x-axis without axisname and category data', () => { + const str = 'xychart-beta \nx-axis [ "cat1" , cat2a ] \n '; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: '', + type: 'text', + }); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ + { + text: 'cat1', + type: 'text', + }, + { text: 'cat2a', type: 'text' }, + ]); + }); + it('parse x-axis throw error if unbalanced bracket', () => { let str = 'xychart-beta \nx-axis xAxisName [ "cat1" [ cat2a ] \n '; expect(parserFnConstructor(str)).toThrow(); @@ -218,6 +244,12 @@ describe('Testing xychart jison file', () => { expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33); }); + it('parse y-axis without axisname with range data', () => { + const str = 'xychart-beta \ny-axis 45.5 --> 33 \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: '', type: 'text' }); + expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33); + }); it('parse y-axis with axis name with range data with only decimal part', () => { const str = 'xychart-beta \ny-axis yAxisName 45.5 --> .33 \n'; expect(parserFnConstructor(str)).not.toThrow(); From fc9ff6c6f382fdd9be1cbca5d01ff38adce2d757 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 2 Sep 2023 20:48:11 +0530 Subject: [PATCH 031/126] Added documentations --- demos/xychart.html | 8 + docs/intro/index.md | 20 +++ docs/syntax/xyChart.md | 170 ++++++++++++++++++ packages/mermaid/src/config.type.ts | 4 - .../xychart/chartBuilder/Interfaces.ts | 3 +- .../components/plot/PlotBorder.ts | 4 +- .../mermaid/src/docs/.vitepress/config.ts | 1 + packages/mermaid/src/docs/intro/examples.md | 11 ++ packages/mermaid/src/docs/syntax/xyChart.md | 155 ++++++++++++++++ .../mermaid/src/schemas/config.schema.yaml | 9 +- packages/mermaid/src/themes/theme-base.js | 2 +- packages/mermaid/src/themes/theme-dark.js | 2 +- packages/mermaid/src/themes/theme-default.js | 2 +- packages/mermaid/src/themes/theme-forest.js | 2 +- packages/mermaid/src/themes/theme-neutral.js | 2 +- 15 files changed, 375 insertions(+), 20 deletions(-) create mode 100644 docs/syntax/xyChart.md create mode 100644 packages/mermaid/src/docs/syntax/xyChart.md diff --git a/demos/xychart.html b/demos/xychart.html index 42992dd257..1a8d8c2913 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -57,8 +57,16 @@ <h1>XY Charts demos</h1> bar "sample bat" [52, 96, 35, 10] </pre> + <hr /> + <h1>XY Charts demos</h1> + <pre class="mermaid"> + xychart-beta + line [+1.3, .6, 2.4, -.34] + </pre> + <h1>XY Charts demos</h1> <pre class="mermaid"> + %%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Basic xychart with many categories" x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] diff --git a/docs/intro/index.md b/docs/intro/index.md index b0e9c2671d..384df43c56 100644 --- a/docs/intro/index.md +++ b/docs/intro/index.md @@ -282,6 +282,26 @@ quadrantChart Campaign F: [0.35, 0.78] ``` +### [XY Chart](../syntax/xyChart.md) + +```mermaid-example +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` + +```mermaid +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` + ## Installation **In depth guides and examples can be found at [Getting Started](./getting-started.md) and [Usage](../config/usage.md).** diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md new file mode 100644 index 0000000000..7e4303ba9f --- /dev/null +++ b/docs/syntax/xyChart.md @@ -0,0 +1,170 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/xyChart.md](../../packages/mermaid/src/docs/syntax/xyChart.md). + +# XY Chart + +> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables. + +> It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time. + +## Example + +```mermaid-example +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` + +```mermaid +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` + +## Syntax + +> **Note** +> all text values can be single word without ", if multiple line required we have to use ". + +### Orientations + +The chart can be drawn horizontal or vertical, default value is vertical + + xychart-beta horizontal + ... + +### Title + +The title is a short description of the chart and it will always render on top of the chart. + +#### Example + + xychart-beta + title "This is a sample example" + ... + +> **Note** +> if the title single word no need to use ", but if it has space " is needed + +### x-axis + +The x-axis primarily serves as a categorical value, although it can also function as a numeric range value when needed. + +#### Example + +1. `x-axis title min --> max` x-axis will function as numeric with the given range +2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type + +### y-axis + +The y-axis is employed to represent numerical range values, it can't have categorical values. + +#### Example + +1. `y-axis title min --> max` +2. `y-axis title` it will only add the title, the range will be auto generated from data. + +> **Note** +> Both x and y axis are optional if not provided we will try to create the range + +### Line chart + +A line chart offers the capability to graphically depict lines. + +#### Example + +1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values. + +### Bar chart + +A bar chart offers the capability to graphically depict bars. + +#### Example + +1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values. + +#### Simplest example + +Every grammer are optional other than the chart name and one data set, so you will be able to draw a chart will a simple config like + + xychart-beta + line [+1.3, .6, 2.4, -.34] + +## Chart Configurations + +| Parameter | Description | Default value | +| ------------------------ | ---------------------------------------------- | :-----------: | +| width | Width of the chart | 700 | +| height | Height of the chart | 500 | +| titlePadding | Top and Bottom padding of the title | 10 | +| titleFontSize | Title font size | 20 | +| showTitle | Title to be shown or not | true | +| xAxis | xAxis configuration | AxisConfig | +| yAxis | yAxis configuration | AxisConfig | +| plotBorderWidth | Width of the border around the plot | 2 | +| chartOrientation | ('vertical' or 'horizontal') | 'vertical' | +| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | + +### AxisConfig + +| Parameter | Description | Default value | +| ------------- | -------------------------------------------- | :-----------: | +| showLabel | Show axis labels or tick values | true | +| labelFontSize | Font size of the label to be drawn | 14 | +| labelPadding | Top and Bottom padding of the label | 5 | +| showTitle | Axis title to be shown or not | true | +| titleFontSize | Axis title font size | 16 | +| titlePadding | Top and Bottom padding of Axis title | 5 | +| showTick | Tick along with the label to be shown or not | true | +| tickLength | How long the tick will be | 5 | +| tickWidth | How width the tick will be | 2 | + +## Chart Theme Variables + +> **Note** +> theames for xychart resides inside xychart attribute so to set the variables use this syntax +> %%{init: { "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% + +| Parameter | Description | +| ---------------- | ------------------------------------------------------ | +| backgroundColor | Background color of the whole chart | +| titleColor | Color of the Title text | +| plotBorderColor | Color of the plot border | +| xAxisLableColor | Color of the x-axis labels | +| xAxisTitleColor | Color of the x-axis title | +| xAxisTickColor | Color of the x-axis tick | +| yAxisLableColor | Color of the y-axis labels | +| yAxisTitleColor | Color of the y-axis title | +| yAxisTickColor | Color of the y-axis tick | +| plotColorPalette | Array of colors for the plots eg \["#f3456", "#43445"] | + +## Example on config and theme + +```mermaid-example +%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` + +```mermaid +%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 0ce1ceb80a..77e3dbeb61 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -763,10 +763,6 @@ export interface XYChartConfig extends BaseDiagramConfig { * height of the chart */ height?: number; - /** - * Font family of texts in the xyChart - */ - fontFamily?: string; /** * Font size of the chart title */ diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 2c92470870..e23374aca4 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -7,7 +7,7 @@ export interface XYChartAxisThemeConfig { export interface XYChartThemeConfig { backgroundColor: string; titleColor: string; - axisLineColor: string; + plotBorderColor: string; xAxisLableColor: string; xAxisTitleColor: string; xAxisTickColor: string; @@ -86,7 +86,6 @@ export interface XYChartAxisConfig { export interface XYChartConfig { width: number; height: number; - fontFamily: string; titleFontSize: number; titlePadding: number; showTitle: boolean; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts index 3870f48e6b..8bddf04d00 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts @@ -23,7 +23,7 @@ export class PlotBorder { path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${ y + height } L ${x},${y}`, - strokeFill: this.chartThemeConfig.axisLineColor, + strokeFill: this.chartThemeConfig.plotBorderColor, strokeWidth: 1, }, ], @@ -39,7 +39,7 @@ export class PlotBorder { path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${ y + height } L ${x},${y}`, - strokeFill: this.chartThemeConfig.axisLineColor, + strokeFill: this.chartThemeConfig.plotBorderColor, strokeWidth: 1, }, ], diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index ede064fa46..e30f91e135 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -146,6 +146,7 @@ function sidebarSyntax() { { text: 'Timeline 🔥', link: '/syntax/timeline' }, { text: 'Zenuml 🔥', link: '/syntax/zenuml' }, { text: 'Sankey 🔥', link: '/syntax/sankey' }, + { text: 'XYChart 🔥', link: '/syntax/xychart' }, { text: 'Other Examples', link: '/syntax/examples' }, ], }, diff --git a/packages/mermaid/src/docs/intro/examples.md b/packages/mermaid/src/docs/intro/examples.md index 7dda288dcb..978edb2b7a 100644 --- a/packages/mermaid/src/docs/intro/examples.md +++ b/packages/mermaid/src/docs/intro/examples.md @@ -117,3 +117,14 @@ quadrantChart Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78] ``` + +### [XY Chart](../syntax/xyChart.md) + +```mermaid-example +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md new file mode 100644 index 0000000000..5e65cb6709 --- /dev/null +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -0,0 +1,155 @@ +# XY Chart + +> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables. + +> It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time. + +## Example + +```mermaid-example +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` + +## Syntax + +```note +all text values can be single word without ", if multiple line required we have to use ". +``` + +### Orientations + +The chart can be drawn horizontal or vertical, default value is vertical + +``` +xychart-beta horizontal +... +``` + +### Title + +The title is a short description of the chart and it will always render on top of the chart. + +#### Example + +``` +xychart-beta + title "This is a sample example" + ... +``` + +```note +if the title single word no need to use ", but if it has space " is needed +``` + +### x-axis + +The x-axis primarily serves as a categorical value, although it can also function as a numeric range value when needed. + +#### Example + +1. `x-axis title min --> max` x-axis will function as numeric with the given range +2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type + +### y-axis + +The y-axis is employed to represent numerical range values, it can't have categorical values. + +#### Example + +1. `y-axis title min --> max` +2. `y-axis title` it will only add the title, the range will be auto generated from data. + +```note +Both x and y axis are optional if not provided we will try to create the range +``` + +### Line chart + +A line chart offers the capability to graphically depict lines. + +#### Example + +1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values. + +### Bar chart + +A bar chart offers the capability to graphically depict bars. + +#### Example + +1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values. + +#### Simplest example + +Every grammer are optional other than the chart name and one data set, so you will be able to draw a chart will a simple config like + +``` +xychart-beta + line [+1.3, .6, 2.4, -.34] +``` + +## Chart Configurations + +| Parameter | Description | Default value | +| ------------------------ | ---------------------------------------------- | :-----------: | +| width | Width of the chart | 700 | +| height | Height of the chart | 500 | +| titlePadding | Top and Bottom padding of the title | 10 | +| titleFontSize | Title font size | 20 | +| showTitle | Title to be shown or not | true | +| xAxis | xAxis configuration | AxisConfig | +| yAxis | yAxis configuration | AxisConfig | +| plotBorderWidth | Width of the border around the plot | 2 | +| chartOrientation | ('vertical' or 'horizontal') | 'vertical' | +| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | + +### AxisConfig + +| Parameter | Description | Default value | +| ------------- | -------------------------------------------- | :-----------: | +| showLabel | Show axis labels or tick values | true | +| labelFontSize | Font size of the label to be drawn | 14 | +| labelPadding | Top and Bottom padding of the label | 5 | +| showTitle | Axis title to be shown or not | true | +| titleFontSize | Axis title font size | 16 | +| titlePadding | Top and Bottom padding of Axis title | 5 | +| showTick | Tick along with the label to be shown or not | true | +| tickLength | How long the tick will be | 5 | +| tickWidth | How width the tick will be | 2 | + +## Chart Theme Variables + +```note +theames for xychart resides inside xychart attribute so to set the variables use this syntax +%%{init: { "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +``` + +| Parameter | Description | +| ---------------- | ----------------------------------------------------- | +| backgroundColor | Background color of the whole chart | +| titleColor | Color of the Title text | +| plotBorderColor | Color of the plot border | +| xAxisLableColor | Color of the x-axis labels | +| xAxisTitleColor | Color of the x-axis title | +| xAxisTickColor | Color of the x-axis tick | +| yAxisLableColor | Color of the y-axis labels | +| yAxisTitleColor | Color of the y-axis title | +| yAxisTickColor | Color of the y-axis tick | +| plotColorPalette | Array of colors for the plots eg ["#f3456", "#43445"] | + +## Example on config and theme + +```mermaid-example +%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 4e9e0e5325..d7f5cdae37 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -1052,7 +1052,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) required: - width - height - - fontFamily - titleFontSize - titlePadding - xAxis @@ -1072,19 +1071,15 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) type: integer default: 500 minimum: 1 - fontFamily: - description: Font family of texts in the xyChart - type: string - default: '"trebuchet ms", verdana, arial, sans-serif' titleFontSize: description: Font size of the chart title type: integer - default: 16 + default: 20 minimum: 1 titlePadding: description: Top and bottom space from the chart title type: integer - default: 5 + default: 10 minimum: 0 showTitle: description: Should show the chart title diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js index 90d5b1446f..f785d9e0c2 100644 --- a/packages/mermaid/src/themes/theme-base.js +++ b/packages/mermaid/src/themes/theme-base.js @@ -249,7 +249,7 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js index 301255e0e4..b32750eac1 100644 --- a/packages/mermaid/src/themes/theme-dark.js +++ b/packages/mermaid/src/themes/theme-dark.js @@ -255,7 +255,7 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index e95755947b..4ba78c8052 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -276,7 +276,7 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js index 3cdcdbdcef..b75d7c944d 100644 --- a/packages/mermaid/src/themes/theme-forest.js +++ b/packages/mermaid/src/themes/theme-forest.js @@ -244,7 +244,7 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js index dbde17d98c..44bcb5e675 100644 --- a/packages/mermaid/src/themes/theme-neutral.js +++ b/packages/mermaid/src/themes/theme-neutral.js @@ -275,7 +275,7 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, From 060d961f39953041b9a1bd9179fe89a81d3c6f21 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 2 Sep 2023 21:15:21 +0530 Subject: [PATCH 032/126] Fixed directive related issue --- demos/xychart.html | 2 +- docs/syntax/xyChart.md | 8 ++++---- packages/mermaid/src/diagrams/xychart/xychartDb.ts | 8 ++++---- packages/mermaid/src/docs/syntax/xyChart.md | 6 +++--- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index 1a8d8c2913..4fc3a12491 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -66,7 +66,7 @@ <h1>XY Charts demos</h1> <h1>XY Charts demos</h1> <pre class="mermaid"> - %%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% + %%{init: {"xyChart": {"width": 600, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Basic xychart with many categories" x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index 7e4303ba9f..6ec12e9fe3 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -131,8 +131,8 @@ Every grammer are optional other than the chart name and one data set, so you wi ## Chart Theme Variables > **Note** -> theames for xychart resides inside xychart attribute so to set the variables use this syntax -> %%{init: { "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +> Themes for xychart resides inside xychart attribute so to set the variables use this syntax +> %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% | Parameter | Description | | ---------------- | ------------------------------------------------------ | @@ -150,7 +150,7 @@ Every grammer are optional other than the chart name and one data set, so you wi ## Example on config and theme ```mermaid-example -%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] @@ -160,7 +160,7 @@ xychart-beta ``` ```mermaid -%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index b8c7dd0a28..297a2b30df 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -27,10 +27,6 @@ import { getThemeVariables } from '../../themes/theme-default.js'; export type SVGGType = Selection<SVGGElement, unknown, Element | null, unknown>; -const defaultThemeVariables = getThemeVariables(); - -const config = configApi.getConfig(); - let plotIndex = 0; let tmpSVGGElem: SVGGType; @@ -48,12 +44,15 @@ interface NormalTextType { } function getChartDefaultThemeConfig(): XYChartThemeConfig { + const defaultThemeVariables = getThemeVariables(); + const config = configApi.getConfig(); return { ...defaultThemeVariables.xyChart, ...config.themeVariables?.xyChart, }; } function getChartDefaultConfig(): XYChartConfig { + const config = configApi.getConfig(); return { ...(defaultConfig.xyChart as XYChartConfig), ...config.xyChart, @@ -87,6 +86,7 @@ function getChartDefalutData(): XYChartData { } function textSanitizer(text: string) { + const config = configApi.getConfig(); return sanitizeText(text.trim(), config); } diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index 5e65cb6709..060cf8ae8e 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -125,8 +125,8 @@ xychart-beta ## Chart Theme Variables ```note -theames for xychart resides inside xychart attribute so to set the variables use this syntax -%%{init: { "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +Themes for xychart resides inside xychart attribute so to set the variables use this syntax +%%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% ``` | Parameter | Description | @@ -145,7 +145,7 @@ theames for xychart resides inside xychart attribute so to set the variables use ## Example on config and theme ```mermaid-example -%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] From cc5190c1baa0bcda51c3245cdf33ba75c231e399 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 3 Sep 2023 13:38:47 +0530 Subject: [PATCH 033/126] Fix some space management issue --- demos/xychart.html | 11 ++ docs/syntax/xyChart.md | 31 ++-- packages/mermaid/src/config.type.ts | 28 +++- .../xychart/chartBuilder/Interfaces.ts | 10 +- .../xychart/chartBuilder/Orchestrator.ts | 22 +-- .../chartBuilder/components/ChartTitle.ts | 4 +- .../chartBuilder/components/axis/BaseAxis.ts | 135 ++++++++++++++---- .../chartBuilder/components/plot/index.ts | 10 +- .../src/diagrams/xychart/xychartRenderer.ts | 14 +- packages/mermaid/src/docs/syntax/xyChart.md | 29 ++-- .../mermaid/src/schemas/config.schema.yaml | 18 ++- packages/mermaid/src/themes/theme-base.js | 2 + packages/mermaid/src/themes/theme-dark.js | 2 + packages/mermaid/src/themes/theme-default.js | 2 + packages/mermaid/src/themes/theme-forest.js | 2 + packages/mermaid/src/themes/theme-neutral.js | 2 + 16 files changed, 232 insertions(+), 90 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index 4fc3a12491..0d0bd8d009 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -92,6 +92,17 @@ <h1>XY Charts demos</h1> bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99] </pre> + <h1>XY Charts demos</h1> + <pre class="mermaid"> + %%{init: {"theme": "dark", "xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%% + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + + </pre> <hr /> <script type="module"> diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index 6ec12e9fe3..477473156d 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -110,23 +110,24 @@ Every grammer are optional other than the chart name and one data set, so you wi | showTitle | Title to be shown or not | true | | xAxis | xAxis configuration | AxisConfig | | yAxis | yAxis configuration | AxisConfig | -| plotBorderWidth | Width of the border around the plot | 2 | | chartOrientation | ('vertical' or 'horizontal') | 'vertical' | | plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | ### AxisConfig -| Parameter | Description | Default value | -| ------------- | -------------------------------------------- | :-----------: | -| showLabel | Show axis labels or tick values | true | -| labelFontSize | Font size of the label to be drawn | 14 | -| labelPadding | Top and Bottom padding of the label | 5 | -| showTitle | Axis title to be shown or not | true | -| titleFontSize | Axis title font size | 16 | -| titlePadding | Top and Bottom padding of Axis title | 5 | -| showTick | Tick along with the label to be shown or not | true | -| tickLength | How long the tick will be | 5 | -| tickWidth | How width the tick will be | 2 | +| Parameter | Description | Default value | +| ------------- | ------------------------------------ | :-----------: | +| showLabel | Show axis labels or tick values | true | +| labelFontSize | Font size of the label to be drawn | 14 | +| labelPadding | Top and Bottom padding of the label | 5 | +| showTitle | Axis title to be shown or not | true | +| titleFontSize | Axis title font size | 16 | +| titlePadding | Top and Bottom padding of Axis title | 5 | +| showTick | Tick to be shown or not | true | +| tickLength | How long the tick will be | 5 | +| tickWidth | How width the tick will be | 2 | +| showAxisLine | Axis line to be shown or not | true | +| axisLineWidth | Thickness of the axis line | 2 | ## Chart Theme Variables @@ -142,15 +143,17 @@ Every grammer are optional other than the chart name and one data set, so you wi | xAxisLableColor | Color of the x-axis labels | | xAxisTitleColor | Color of the x-axis title | | xAxisTickColor | Color of the x-axis tick | +| xAxisLineColor | Color of the x-axis line | | yAxisLableColor | Color of the y-axis labels | | yAxisTitleColor | Color of the y-axis title | | yAxisTickColor | Color of the y-axis tick | +| yAxisLineColor | Color of the y-axis line | | plotColorPalette | Array of colors for the plots eg \["#f3456", "#43445"] | ## Example on config and theme ```mermaid-example -%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% +%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] @@ -160,7 +163,7 @@ xychart-beta ``` ```mermaid -%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% +%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 77e3dbeb61..be20f2a4d2 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -747,6 +747,14 @@ export interface XYChartAxisConfig { * width of the axis tick lines */ tickWidth?: number; + /** + * Show line across the axis + */ + showAxisLine?: boolean; + /** + * Width of the axis line + */ + axisLineWidth?: number; } /** * This object contains configuration specific to XYCharts @@ -777,10 +785,6 @@ export interface XYChartConfig extends BaseDiagramConfig { showTitle?: boolean; xAxis?: XYChartAxisConfig1; yAxis?: XYChartAxisConfig2; - /** - * width of the line around the plot of the chart - */ - plotBorderWidth?: number; /** * How to plot will be drawn horizontal or vertical */ @@ -830,6 +834,14 @@ export interface XYChartAxisConfig1 { * width of the axis tick lines */ tickWidth?: number; + /** + * Show line across the axis + */ + showAxisLine?: boolean; + /** + * Width of the axis line + */ + axisLineWidth?: number; } /** * This object contains configuration for XYChart axis config @@ -871,6 +883,14 @@ export interface XYChartAxisConfig2 { * width of the axis tick lines */ tickWidth?: number; + /** + * Show line across the axis + */ + showAxisLine?: boolean; + /** + * Width of the axis line + */ + axisLineWidth?: number; } /** * The object containing configurations specific for entity relationship diagrams diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index e23374aca4..33eb4f2270 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -2,6 +2,7 @@ export interface XYChartAxisThemeConfig { titleColor: string; labelColor: string; tickColor: string; + axisLineColor: string; } export interface XYChartThemeConfig { @@ -11,9 +12,11 @@ export interface XYChartThemeConfig { xAxisLableColor: string; xAxisTitleColor: string; xAxisTickColor: string; + xAxisLineColor: string; yAxisLableColor: string; yAxisTitleColor: string; yAxisTickColor: string; + yAxisLineColor: string; plotColorPalette: string; } @@ -81,6 +84,8 @@ export interface XYChartAxisConfig { showTick: boolean; tickLength: number; tickWidth: number; + showAxisLine: boolean; + axisLineWidth: number; } export interface XYChartConfig { @@ -91,7 +96,6 @@ export interface XYChartConfig { showTitle: boolean; xAxis: XYChartAxisConfig; yAxis: XYChartAxisConfig; - plotBorderWidth: number; chartOrientation: 'vertical' | 'horizontal'; plotReservedSpacePercent: number; } @@ -115,8 +119,8 @@ export interface Point { y: number; } -export type TextVerticalPos = 'left' | 'center' | 'right'; -export type TextHorizontalPos = 'top' | 'middle' | 'bottom'; +export type TextHorizontalPos = 'left' | 'center' | 'right'; +export type TextVerticalPos = 'top' | 'middle' | 'bottom'; export interface RectElem extends Point { width: number; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index b89d1c94e4..b008c9a294 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -32,6 +32,7 @@ export class Orchestrator { titleColor: chartThemeConfig.xAxisTitleColor, labelColor: chartThemeConfig.xAxisLableColor, tickColor: chartThemeConfig.xAxisTickColor, + axisLineColor: chartThemeConfig.xAxisLineColor, }, tmpSVGGElem ), @@ -42,6 +43,7 @@ export class Orchestrator { titleColor: chartThemeConfig.yAxisTitleColor, labelColor: chartThemeConfig.yAxisLableColor, tickColor: chartThemeConfig.yAxisTickColor, + axisLineColor: chartThemeConfig.yAxisLineColor, }, tmpSVGGElem ), @@ -94,11 +96,11 @@ export class Orchestrator { chartHeight += availableHeight; availableHeight = 0; } - const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; - plotX += plotBorderWidthHalf; - plotY += plotBorderWidthHalf; - chartWidth -= this.chartConfig.plotBorderWidth; - chartHeight -= this.chartConfig.plotBorderWidth; + // const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; + // plotX += plotBorderWidthHalf; + // plotY += plotBorderWidthHalf; + // chartWidth -= this.chartConfig.plotBorderWidth; + // chartHeight -= this.chartConfig.plotBorderWidth; this.componentStore.plot.calculateSpace({ width: chartWidth, height: chartHeight, @@ -166,11 +168,11 @@ export class Orchestrator { chartHeight += availableHeight; availableHeight = 0; } - const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; - plotX += plotBorderWidthHalf; - plotY += plotBorderWidthHalf; - chartWidth -= this.chartConfig.plotBorderWidth; - chartHeight -= this.chartConfig.plotBorderWidth; + // const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; + // plotX += plotBorderWidthHalf; + // plotY += plotBorderWidthHalf; + // chartWidth -= this.chartConfig.plotBorderWidth; + // chartHeight -= this.chartConfig.plotBorderWidth; this.componentStore.plot.calculateSpace({ width: chartWidth, height: chartHeight, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 7a5bcf3416..99ccbb6da8 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -64,8 +64,8 @@ export class ChartTitle implements ChartComponent { { fontSize: this.chartConfig.titleFontSize, text: this.chartData.title, - verticalPos: 'center', - horizontalPos: 'middle', + verticalPos: 'middle', + horizontalPos: 'center', x: this.boundingRect.x + this.boundingRect.width / 2, y: this.boundingRect.y + this.boundingRect.height / 2, fill: this.chartThemeConfig.titleColor, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index 7bbaf57491..873455a3fe 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -20,6 +20,7 @@ export abstract class BaseAxis implements Axis { protected showTitle = false; protected showLabel = false; protected showTick = false; + protected showAxisLine = false; protected outerPadding = 0; constructor( @@ -35,6 +36,11 @@ export abstract class BaseAxis implements Axis { setRange(range: [number, number]): void { this.range = range; + if (this.axisPosition === 'left' || this.axisPosition === 'right') { + this.boundingRect.height = range[1] - range[0]; + } else { + this.boundingRect.width = range[1] - range[0]; + } this.recalculateScale(); } @@ -77,6 +83,10 @@ export abstract class BaseAxis implements Axis { private calculateSpaceIfDrawnHorizontally(availableSpace: Dimension) { let availableHeight = availableSpace.height; + if (this.axisConfig.showAxisLine && availableHeight > this.axisConfig.axisLineWidth) { + availableHeight -= this.axisConfig.axisLineWidth; + this.showAxisLine = true; + } if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.width; @@ -96,7 +106,7 @@ export abstract class BaseAxis implements Axis { if (this.axisConfig.showTitle && this.title) { const spaceRequired = this.textDimensionCalculator.getMaxDimension( [this.title], - this.axisConfig.labelFontSize + this.axisConfig.titleFontSize ); const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2; log.trace('height required for axis title: ', heightRequired); @@ -111,6 +121,10 @@ export abstract class BaseAxis implements Axis { private calculateSpaceIfDrawnVertical(availableSpace: Dimension) { let availableWidth = availableSpace.width; + if (this.axisConfig.showAxisLine && availableWidth > this.axisConfig.axisLineWidth) { + availableWidth -= this.axisConfig.axisLineWidth; + this.showAxisLine = true; + } if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.height; @@ -129,9 +143,9 @@ export abstract class BaseAxis implements Axis { if (this.axisConfig.showTitle && this.title) { const spaceRequired = this.textDimensionCalculator.getMaxDimension( [this.title], - this.axisConfig.labelFontSize + this.axisConfig.titleFontSize ); - const widthRequired = spaceRequired.height + this.axisConfig.labelPadding * 2; + const widthRequired = spaceRequired.height + this.axisConfig.titlePadding * 2; log.trace('width required for axis title: ', widthRequired); if (widthRequired <= availableWidth) { availableWidth -= widthRequired; @@ -166,6 +180,22 @@ export abstract class BaseAxis implements Axis { private getDrawaableElementsForLeftAxis(): DrawableElem[] { const drawableElement: DrawableElem[] = []; + if (this.showAxisLine) { + const x = this.boundingRect.x + this.boundingRect.width - this.axisConfig.axisLineWidth / 2; + drawableElement.push({ + type: 'path', + groupTexts: ['left-axis', 'axisl-line'], + data: [ + { + path: `M ${x},${this.boundingRect.y} L ${x},${ + this.boundingRect.y + this.boundingRect.height + } `, + strokeFill: this.axisThemeConfig.axisLineColor, + strokeWidth: this.axisConfig.axisLineWidth, + }, + ], + }); + } if (this.showLabel) { drawableElement.push({ type: 'text', @@ -175,19 +205,23 @@ export abstract class BaseAxis implements Axis { x: this.boundingRect.x + this.boundingRect.width - - this.axisConfig.labelPadding - - this.axisConfig.tickLength, + (this.showLabel ? this.axisConfig.labelPadding : 0) - + (this.showTick ? this.axisConfig.tickLength : 0) - + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0), y: this.getScaleValue(tick), fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, - verticalPos: 'right', - horizontalPos: 'middle', + verticalPos: 'middle', + horizontalPos: 'right', })), }); } if (this.showTick) { - const x = this.boundingRect.x + this.boundingRect.width; + const x = + this.boundingRect.x + + this.boundingRect.width - + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0); drawableElement.push({ type: 'path', groupTexts: ['left-axis', 'ticks'], @@ -208,12 +242,12 @@ export abstract class BaseAxis implements Axis { { text: this.title, x: this.boundingRect.x + this.axisConfig.titlePadding, - y: this.range[0] + (this.range[1] - this.range[0]) / 2, + y: this.boundingRect.y + this.boundingRect.height / 2, fill: this.axisThemeConfig.titleColor, fontSize: this.axisConfig.titleFontSize, rotation: 270, - verticalPos: 'center', - horizontalPos: 'top', + verticalPos: 'top', + horizontalPos: 'center', }, ], }); @@ -222,6 +256,22 @@ export abstract class BaseAxis implements Axis { } private getDrawaableElementsForBottomAxis(): DrawableElem[] { const drawableElement: DrawableElem[] = []; + if (this.showAxisLine) { + const y = this.boundingRect.y + this.axisConfig.axisLineWidth / 2; + drawableElement.push({ + type: 'path', + groupTexts: ['bottom-axis', 'axis-line'], + data: [ + { + path: `M ${this.boundingRect.x},${y} L ${ + this.boundingRect.x + this.boundingRect.width + },${y}`, + strokeFill: this.axisThemeConfig.axisLineColor, + strokeWidth: this.axisConfig.axisLineWidth, + }, + ], + }); + } if (this.showLabel) { drawableElement.push({ type: 'text', @@ -229,12 +279,16 @@ export abstract class BaseAxis implements Axis { data: this.getTickValues().map((tick) => ({ text: tick.toString(), x: this.getScaleValue(tick), - y: this.boundingRect.y + this.axisConfig.labelPadding + this.axisConfig.tickLength, + y: + this.boundingRect.y + + (this.showLabel ? this.axisConfig.labelPadding : 0) + + (this.showTitle ? this.axisConfig.tickLength : 0) + + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0), fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, - verticalPos: 'center', - horizontalPos: 'top', + verticalPos: 'top', + horizontalPos: 'center', })), }); } @@ -244,8 +298,12 @@ export abstract class BaseAxis implements Axis { type: 'path', groupTexts: ['bottom-axis', 'ticks'], data: this.getTickValues().map((tick) => ({ - path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${ - y + this.axisConfig.tickLength + path: `M ${this.getScaleValue(tick)},${ + y + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0) + } L ${this.getScaleValue(tick)},${ + y + + (this.showTick ? this.axisConfig.tickLength : 0) + + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0) }`, strokeFill: this.axisThemeConfig.tickColor, strokeWidth: this.axisConfig.tickWidth, @@ -264,8 +322,8 @@ export abstract class BaseAxis implements Axis { fill: this.axisThemeConfig.titleColor, fontSize: this.axisConfig.titleFontSize, rotation: 0, - verticalPos: 'center', - horizontalPos: 'bottom', + verticalPos: 'bottom', + horizontalPos: 'center', }, ], }); @@ -274,6 +332,22 @@ export abstract class BaseAxis implements Axis { } private getDrawaableElementsForTopAxis(): DrawableElem[] { const drawableElement: DrawableElem[] = []; + if (this.showAxisLine) { + const y = this.boundingRect.y + this.boundingRect.height - this.axisConfig.axisLineWidth / 2; + drawableElement.push({ + type: 'path', + groupTexts: ['top-axis', 'axis-line'], + data: [ + { + path: `M ${this.boundingRect.x},${y} L ${ + this.boundingRect.x + this.boundingRect.width + },${y}`, + strokeFill: this.axisThemeConfig.axisLineColor, + strokeWidth: this.axisConfig.axisLineWidth, + }, + ], + }); + } if (this.showLabel) { drawableElement.push({ type: 'text', @@ -283,14 +357,16 @@ export abstract class BaseAxis implements Axis { x: this.getScaleValue(tick), y: this.boundingRect.y + - this.boundingRect.height - - this.axisConfig.labelPadding - - this.axisConfig.tickLength, + (this.showTitle + ? this.axisConfig.titleFontSize + + this.axisConfig.labelPadding + + this.axisConfig.titlePadding * 2 + : 0), fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, - verticalPos: 'center', - horizontalPos: 'bottom', + verticalPos: 'top', + horizontalPos: 'center', })), }); } @@ -301,9 +377,12 @@ export abstract class BaseAxis implements Axis { groupTexts: ['bottom-axis', 'ticks'], data: this.getTickValues().map((tick) => ({ path: `M ${this.getScaleValue(tick)},${ - y + this.boundingRect.height + y + this.boundingRect.height - (this.showAxisLine ? this.axisConfig.axisLineWidth : 0) } L ${this.getScaleValue(tick)},${ - y + this.boundingRect.height - this.axisConfig.tickLength + y + + this.boundingRect.height - + this.axisConfig.tickLength - + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0) }`, strokeFill: this.axisThemeConfig.tickColor, strokeWidth: this.axisConfig.tickWidth, @@ -317,13 +396,13 @@ export abstract class BaseAxis implements Axis { data: [ { text: this.title, - x: this.range[0] + (this.range[1] - this.range[0]) / 2, + x: this.boundingRect.x + this.boundingRect.width / 2, y: this.boundingRect.y + this.axisConfig.titlePadding, fill: this.axisThemeConfig.titleColor, fontSize: this.axisConfig.titleFontSize, rotation: 0, - verticalPos: 'center', - horizontalPos: 'top', + verticalPos: 'top', + horizontalPos: 'center', }, ], }); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 027ba7c7a1..2d45d795c2 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -56,11 +56,11 @@ export class Plot implements Plot { throw Error('Axes must be passed to render Plots'); } const drawableElem: DrawableElem[] = [ - ...new PlotBorder( - this.boundingRect, - this.chartConfig.chartOrientation, - this.chartThemeConfig - ).getDrawableElement(), + // ...new PlotBorder( + // this.boundingRect, + // this.chartConfig.chartOrientation, + // this.chartThemeConfig + // ).getDrawableElement(), ]; for (const [i, plot] of this.chartData.plots.entries()) { switch (plot.type) { diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index 8f999cb00c..19d9d35e47 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -14,11 +14,15 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram const db = diagObj.db as typeof XYChartDB; const themeConfig = db.getChartThemeConfig(); const chartConfig = db.getChartConfig(); - function getDominantBaseLine(horizontalPos: TextHorizontalPos) { - return horizontalPos === 'top' ? 'hanging' : 'middle'; + function getDominantBaseLine(horizontalPos: TextVerticalPos) { + return horizontalPos === 'top' + ? 'text-before-edge' + : horizontalPos === 'bottom' + ? 'text-after-edge' + : 'middle'; } - function getTextAnchor(verticalPos: TextVerticalPos) { + function getTextAnchor(verticalPos: TextHorizontalPos) { return verticalPos === 'left' ? 'start' : verticalPos === 'right' ? 'end' : 'middle'; } @@ -108,8 +112,8 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram .attr('y', 0) .attr('fill', (data) => data.fill) .attr('font-size', (data) => data.fontSize) - .attr('dominant-baseline', (data) => getDominantBaseLine(data.horizontalPos)) - .attr('text-anchor', (data) => getTextAnchor(data.verticalPos)) + .attr('dominant-baseline', (data) => getDominantBaseLine(data.verticalPos)) + .attr('text-anchor', (data) => getTextAnchor(data.horizontalPos)) .attr('transform', (data) => getTextTransformation(data)) .text((data) => data.text); break; diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index 060cf8ae8e..52b765a602 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -104,23 +104,24 @@ xychart-beta | showTitle | Title to be shown or not | true | | xAxis | xAxis configuration | AxisConfig | | yAxis | yAxis configuration | AxisConfig | -| plotBorderWidth | Width of the border around the plot | 2 | | chartOrientation | ('vertical' or 'horizontal') | 'vertical' | | plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | ### AxisConfig -| Parameter | Description | Default value | -| ------------- | -------------------------------------------- | :-----------: | -| showLabel | Show axis labels or tick values | true | -| labelFontSize | Font size of the label to be drawn | 14 | -| labelPadding | Top and Bottom padding of the label | 5 | -| showTitle | Axis title to be shown or not | true | -| titleFontSize | Axis title font size | 16 | -| titlePadding | Top and Bottom padding of Axis title | 5 | -| showTick | Tick along with the label to be shown or not | true | -| tickLength | How long the tick will be | 5 | -| tickWidth | How width the tick will be | 2 | +| Parameter | Description | Default value | +| ------------- | ------------------------------------ | :-----------: | +| showLabel | Show axis labels or tick values | true | +| labelFontSize | Font size of the label to be drawn | 14 | +| labelPadding | Top and Bottom padding of the label | 5 | +| showTitle | Axis title to be shown or not | true | +| titleFontSize | Axis title font size | 16 | +| titlePadding | Top and Bottom padding of Axis title | 5 | +| showTick | Tick to be shown or not | true | +| tickLength | How long the tick will be | 5 | +| tickWidth | How width the tick will be | 2 | +| showAxisLine | Axis line to be shown or not | true | +| axisLineWidth | Thickness of the axis line | 2 | ## Chart Theme Variables @@ -137,15 +138,17 @@ Themes for xychart resides inside xychart attribute so to set the variables use | xAxisLableColor | Color of the x-axis labels | | xAxisTitleColor | Color of the x-axis title | | xAxisTickColor | Color of the x-axis tick | +| xAxisLineColor | Color of the x-axis line | | yAxisLableColor | Color of the y-axis labels | | yAxisTitleColor | Color of the y-axis title | | yAxisTickColor | Color of the y-axis tick | +| yAxisLineColor | Color of the y-axis line | | plotColorPalette | Array of colors for the plots eg ["#f3456", "#43445"] | ## Example on config and theme ```mermaid-example -%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% +%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index d7f5cdae37..da809985c8 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -1000,6 +1000,8 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) - showTick - tickLength - tickWidth + - showAxisLine + - axisLineWidth properties: showLabel: description: Should show the axis labels (tick text) @@ -1043,6 +1045,16 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) type: integer default: 2 minimum: 1 + showAxisLine: + description: Show line across the axis + type: boolean + default: true + axisLineWidth: + description: Width of the axis line + type: integer + default: 2 + minimum: 1 + XYChartConfig: title: XYChart Config allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] @@ -1057,7 +1069,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) - xAxis - yAxis - showTitle - - plotBorderWidth - chartOrientation - plotReservedSpacePercent properties: @@ -1091,11 +1102,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) yAxis: $ref: '#/$defs/XYChartAxisConfig' default: { '$ref': '#/$defs/XYChartAxisConfig' } - plotBorderWidth: - description: width of the line around the plot of the chart - type: integer - default: 2 - minimum: 0 chartOrientation: description: How to plot will be drawn horizontal or vertical tsType: '"vertical" | "horizontal"' diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js index f785d9e0c2..db7fd2ba15 100644 --- a/packages/mermaid/src/themes/theme-base.js +++ b/packages/mermaid/src/themes/theme-base.js @@ -253,9 +253,11 @@ class Theme { xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, plotColorPalette: this.xyChart?.plotColorPalette || [ '#FFF4DD', '#FFD8B1', diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js index b32750eac1..c4354736b9 100644 --- a/packages/mermaid/src/themes/theme-dark.js +++ b/packages/mermaid/src/themes/theme-dark.js @@ -259,9 +259,11 @@ class Theme { xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, plotColorPalette: this.xyChart?.plotColorPalette || [ '#3498db', '#2ecc71', diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index 4ba78c8052..ea3d20a5af 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -280,9 +280,11 @@ class Theme { xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, plotColorPalette: this.xyChart?.plotColorPalette || [ '#ECECFF', '#8493A6', diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js index b75d7c944d..0b5300d677 100644 --- a/packages/mermaid/src/themes/theme-forest.js +++ b/packages/mermaid/src/themes/theme-forest.js @@ -248,9 +248,11 @@ class Theme { xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, plotColorPalette: this.xyChart?.plotColorPalette || [ '#CDE498', '#FF6B6B', diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js index 44bcb5e675..26f84c38dd 100644 --- a/packages/mermaid/src/themes/theme-neutral.js +++ b/packages/mermaid/src/themes/theme-neutral.js @@ -279,9 +279,11 @@ class Theme { xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, plotColorPalette: this.xyChart?.plotColorPalette || [ '#EEE', '#6BB8E4', From c3a9bb9a2326eb13ec25e58e77f4482e648e9023 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 3 Sep 2023 20:48:10 +0530 Subject: [PATCH 034/126] Fixed more edge cases --- demos/xychart.html | 14 ++++++ docs/syntax/xyChart.md | 27 +++++----- .../xychart/chartBuilder/Interfaces.ts | 7 ++- .../xychart/chartBuilder/Orchestrator.ts | 14 +----- .../chartBuilder/components/ChartTitle.ts | 8 +-- .../chartBuilder/components/axis/BaseAxis.ts | 42 ++++++++-------- .../components/plot/PlotBorder.ts | 49 ------------------- .../chartBuilder/components/plot/index.ts | 9 +--- .../mermaid/src/diagrams/xychart/xychartDb.ts | 6 +-- .../src/diagrams/xychart/xychartRenderer.ts | 6 +-- packages/mermaid/src/docs/syntax/xyChart.md | 27 +++++----- packages/mermaid/src/themes/theme-base.js | 20 ++------ packages/mermaid/src/themes/theme-dark.js | 20 ++------ packages/mermaid/src/themes/theme-default.js | 20 ++------ packages/mermaid/src/themes/theme-forest.js | 20 ++------ packages/mermaid/src/themes/theme-neutral.js | 20 ++------ 16 files changed, 100 insertions(+), 209 deletions(-) delete mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts diff --git a/demos/xychart.html b/demos/xychart.html index 0d0bd8d009..927047129d 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -92,6 +92,20 @@ <h1>XY Charts demos</h1> bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99] </pre> + <h1>sparkline demos</h1> + <pre class="mermaid"> + %%{init: {"theme":"dark", "xyChart": { "width":200, "height": 20, "plotReservedSpacePercent": 100}}}%% + xychart-beta + line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] + </pre> + + <h1>sparkBar demos</h1> + <pre class="mermaid"> + %%{init: {"theme":"dark", "xyChart": {"width": 200, "height": 20, "xAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}, "yAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}}}}%% + xychart-beta + bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] + </pre> + <h1>XY Charts demos</h1> <pre class="mermaid"> %%{init: {"theme": "dark", "xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%% diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index 477473156d..4ee83bdba8 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -135,20 +135,19 @@ Every grammer are optional other than the chart name and one data set, so you wi > Themes for xychart resides inside xychart attribute so to set the variables use this syntax > %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% -| Parameter | Description | -| ---------------- | ------------------------------------------------------ | -| backgroundColor | Background color of the whole chart | -| titleColor | Color of the Title text | -| plotBorderColor | Color of the plot border | -| xAxisLableColor | Color of the x-axis labels | -| xAxisTitleColor | Color of the x-axis title | -| xAxisTickColor | Color of the x-axis tick | -| xAxisLineColor | Color of the x-axis line | -| yAxisLableColor | Color of the y-axis labels | -| yAxisTitleColor | Color of the y-axis title | -| yAxisTickColor | Color of the y-axis tick | -| yAxisLineColor | Color of the y-axis line | -| plotColorPalette | Array of colors for the plots eg \["#f3456", "#43445"] | +| Parameter | Description | +| ---------------- | ------------------------------------------------------- | +| backgroundColor | Background color of the whole chart | +| titleColor | Color of the Title text | +| xAxisLableColor | Color of the x-axis labels | +| xAxisTitleColor | Color of the x-axis title | +| xAxisTickColor | Color of the x-axis tick | +| xAxisLineColor | Color of the x-axis line | +| yAxisLableColor | Color of the y-axis labels | +| yAxisTitleColor | Color of the y-axis title | +| yAxisTickColor | Color of the y-axis tick | +| yAxisLineColor | Color of the y-axis line | +| plotColorPalette | String of colors seperated by comma eg "#f3456, #43445" | ## Example on config and theme diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 33eb4f2270..3d188895f2 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -8,12 +8,11 @@ export interface XYChartAxisThemeConfig { export interface XYChartThemeConfig { backgroundColor: string; titleColor: string; - plotBorderColor: string; - xAxisLableColor: string; + xAxisLabelColor: string; xAxisTitleColor: string; xAxisTickColor: string; xAxisLineColor: string; - yAxisLableColor: string; + yAxisLabelColor: string; yAxisTitleColor: string; yAxisTickColor: string; yAxisLineColor: string; @@ -120,7 +119,7 @@ export interface Point { } export type TextHorizontalPos = 'left' | 'center' | 'right'; -export type TextVerticalPos = 'top' | 'middle' | 'bottom'; +export type TextVerticalPos = 'top' | 'middle'; export interface RectElem extends Point { width: number; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index b008c9a294..256a103eb7 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -30,7 +30,7 @@ export class Orchestrator { chartConfig.xAxis, { titleColor: chartThemeConfig.xAxisTitleColor, - labelColor: chartThemeConfig.xAxisLableColor, + labelColor: chartThemeConfig.xAxisLabelColor, tickColor: chartThemeConfig.xAxisTickColor, axisLineColor: chartThemeConfig.xAxisLineColor, }, @@ -41,7 +41,7 @@ export class Orchestrator { chartConfig.yAxis, { titleColor: chartThemeConfig.yAxisTitleColor, - labelColor: chartThemeConfig.yAxisLableColor, + labelColor: chartThemeConfig.yAxisLabelColor, tickColor: chartThemeConfig.yAxisTickColor, axisLineColor: chartThemeConfig.yAxisLineColor, }, @@ -96,11 +96,6 @@ export class Orchestrator { chartHeight += availableHeight; availableHeight = 0; } - // const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; - // plotX += plotBorderWidthHalf; - // plotY += plotBorderWidthHalf; - // chartWidth -= this.chartConfig.plotBorderWidth; - // chartHeight -= this.chartConfig.plotBorderWidth; this.componentStore.plot.calculateSpace({ width: chartWidth, height: chartHeight, @@ -168,11 +163,6 @@ export class Orchestrator { chartHeight += availableHeight; availableHeight = 0; } - // const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; - // plotX += plotBorderWidthHalf; - // plotY += plotBorderWidthHalf; - // chartWidth -= this.chartConfig.plotBorderWidth; - // chartHeight -= this.chartConfig.plotBorderWidth; this.componentStore.plot.calculateSpace({ width: chartWidth, height: chartHeight, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 99ccbb6da8..18dd38b710 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -27,7 +27,7 @@ export class ChartTitle implements ChartComponent { width: 0, height: 0, }; - this.showChartTitle = !!(this.chartData.title && this.chartConfig.showTitle); + this.showChartTitle = false; } setBoundingBoxXY(point: Point): void { this.boundingRect.x = point.x; @@ -43,10 +43,12 @@ export class ChartTitle implements ChartComponent { if ( titleDimension.width <= widthRequired && titleDimension.height <= heightRequired && - this.showChartTitle + this.chartConfig.showTitle && + this.chartData.title ) { this.boundingRect.width = widthRequired; this.boundingRect.height = heightRequired; + this.showChartTitle = true; } return { @@ -56,7 +58,7 @@ export class ChartTitle implements ChartComponent { } getDrawableElements(): DrawableElem[] { const drawableElem: DrawableElem[] = []; - if (this.boundingRect.height > 0 && this.boundingRect.width > 0) { + if (this.showChartTitle) { drawableElem.push({ groupTexts: ['chart-title'], type: 'text', diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index 873455a3fe..1f16990285 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -22,6 +22,8 @@ export abstract class BaseAxis implements Axis { protected showTick = false; protected showAxisLine = false; protected outerPadding = 0; + protected titleTextHeight = 0; + protected labelTextHeight = 0; constructor( protected axisConfig: XYChartAxisConfig, @@ -93,6 +95,7 @@ export abstract class BaseAxis implements Axis { this.outerPadding = Math.min(spaceRequired.width / 2, maxPadding); const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2; + this.labelTextHeight = spaceRequired.height; log.trace('height required for axis label: ', heightRequired); if (heightRequired <= availableHeight) { availableHeight -= heightRequired; @@ -109,6 +112,7 @@ export abstract class BaseAxis implements Axis { this.axisConfig.titleFontSize ); const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2; + this.titleTextHeight = spaceRequired.height; log.trace('height required for axis title: ', heightRequired); if (heightRequired <= availableHeight) { availableHeight -= heightRequired; @@ -146,6 +150,7 @@ export abstract class BaseAxis implements Axis { this.axisConfig.titleFontSize ); const widthRequired = spaceRequired.height + this.axisConfig.titlePadding * 2; + this.titleTextHeight = spaceRequired.height; log.trace('width required for axis title: ', widthRequired); if (widthRequired <= availableWidth) { availableWidth -= widthRequired; @@ -157,10 +162,6 @@ export abstract class BaseAxis implements Axis { } calculateSpace(availableSpace: Dimension): Dimension { - if (!(this.axisConfig.showLabel || this.axisConfig.showTitle)) { - this.recalculateScale(); - return { width: 0, height: 0 }; - } if (this.axisPosition === 'left' || this.axisPosition === 'right') { this.calculateSpaceIfDrawnVertical(availableSpace); } else { @@ -281,8 +282,8 @@ export abstract class BaseAxis implements Axis { x: this.getScaleValue(tick), y: this.boundingRect.y + - (this.showLabel ? this.axisConfig.labelPadding : 0) + - (this.showTitle ? this.axisConfig.tickLength : 0) + + this.axisConfig.labelPadding + + (this.showTick ? this.axisConfig.tickLength : 0) + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0), fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, @@ -293,17 +294,13 @@ export abstract class BaseAxis implements Axis { }); } if (this.showTick) { - const y = this.boundingRect.y; + const y = this.boundingRect.y + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0); drawableElement.push({ type: 'path', groupTexts: ['bottom-axis', 'ticks'], data: this.getTickValues().map((tick) => ({ - path: `M ${this.getScaleValue(tick)},${ - y + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0) - } L ${this.getScaleValue(tick)},${ - y + - (this.showTick ? this.axisConfig.tickLength : 0) + - (this.showAxisLine ? this.axisConfig.axisLineWidth : 0) + path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${ + y + this.axisConfig.tickLength }`, strokeFill: this.axisThemeConfig.tickColor, strokeWidth: this.axisConfig.tickWidth, @@ -318,11 +315,15 @@ export abstract class BaseAxis implements Axis { { text: this.title, x: this.range[0] + (this.range[1] - this.range[0]) / 2, - y: this.boundingRect.y + this.boundingRect.height - this.axisConfig.titlePadding, + y: + this.boundingRect.y + + this.boundingRect.height - + this.axisConfig.titlePadding - + this.titleTextHeight, fill: this.axisThemeConfig.titleColor, fontSize: this.axisConfig.titleFontSize, rotation: 0, - verticalPos: 'bottom', + verticalPos: 'top', horizontalPos: 'center', }, ], @@ -357,11 +358,8 @@ export abstract class BaseAxis implements Axis { x: this.getScaleValue(tick), y: this.boundingRect.y + - (this.showTitle - ? this.axisConfig.titleFontSize + - this.axisConfig.labelPadding + - this.axisConfig.titlePadding * 2 - : 0), + (this.showTitle ? this.titleTextHeight + this.axisConfig.titlePadding * 2 : 0) + + this.axisConfig.labelPadding, fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, @@ -374,7 +372,7 @@ export abstract class BaseAxis implements Axis { const y = this.boundingRect.y; drawableElement.push({ type: 'path', - groupTexts: ['bottom-axis', 'ticks'], + groupTexts: ['top-axis', 'ticks'], data: this.getTickValues().map((tick) => ({ path: `M ${this.getScaleValue(tick)},${ y + this.boundingRect.height - (this.showAxisLine ? this.axisConfig.axisLineWidth : 0) @@ -392,7 +390,7 @@ export abstract class BaseAxis implements Axis { if (this.showTitle) { drawableElement.push({ type: 'text', - groupTexts: ['bottom-axis', 'title'], + groupTexts: ['top-axis', 'title'], data: [ { text: this.title, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts deleted file mode 100644 index 8bddf04d00..0000000000 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts +++ /dev/null @@ -1,49 +0,0 @@ -import type { - BoundingRect, - DrawableElem, - XYChartConfig, - XYChartThemeConfig, -} from '../../Interfaces.js'; -export class PlotBorder { - constructor( - private boundingRect: BoundingRect, - private orientation: XYChartConfig['chartOrientation'], - private chartThemeConfig: XYChartThemeConfig - ) {} - - getDrawableElement(): DrawableElem[] { - const { x, y, width, height } = this.boundingRect; - if (this.orientation === 'horizontal') { - return [ - { - groupTexts: ['plot', 'chart-border'], - type: 'path', - data: [ - { - path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${ - y + height - } L ${x},${y}`, - strokeFill: this.chartThemeConfig.plotBorderColor, - strokeWidth: 1, - }, - ], - }, - ]; - } - return [ - { - groupTexts: ['plot', 'chart-border'], - type: 'path', - data: [ - { - path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${ - y + height - } L ${x},${y}`, - strokeFill: this.chartThemeConfig.plotBorderColor, - strokeWidth: 1, - }, - ], - }, - ]; - } -} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 2d45d795c2..3707923793 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -10,7 +10,6 @@ import type { import type { Axis } from '../axis/index.js'; import type { ChartComponent } from '../../Interfaces.js'; import { LinePlot } from './LinePlot.js'; -import { PlotBorder } from './PlotBorder.js'; import { BarPlot } from './BarPlot.js'; export interface Plot extends ChartComponent { @@ -55,13 +54,7 @@ export class Plot implements Plot { if (!(this.xAxis && this.yAxis)) { throw Error('Axes must be passed to render Plots'); } - const drawableElem: DrawableElem[] = [ - // ...new PlotBorder( - // this.boundingRect, - // this.chartConfig.chartOrientation, - // this.chartThemeConfig - // ).getDrawableElement(), - ]; + const drawableElem: DrawableElem[] = []; for (const [i, plot] of this.chartData.plots.entries()) { switch (plot.type) { case 'line': diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 297a2b30df..b585b3ba00 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -34,7 +34,7 @@ let tmpSVGGElem: SVGGType; let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); let xyChartData: XYChartData = getChartDefalutData(); -let plotColorPalette = xyChartThemeConfig.plotColorPalette; +let plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim()); let hasSetXAxis = false; let hasSetYAxis = false; @@ -175,7 +175,7 @@ function transformDataWithoutCategory(data: number[]): SimplePlotDataType { } function getPlotColorFromPalette(plotIndex: number): string { - return plotColorPalette[plotIndex === 0 ? 0 : plotIndex % (plotColorPalette.length - 1)]; + return plotColorPalette[plotIndex === 0 ? 0 : plotIndex % plotColorPalette.length]; } function setLineData(title: NormalTextType, data: number[]) { @@ -221,7 +221,7 @@ const clear = function () { xyChartConfig = getChartDefaultConfig(); xyChartData = getChartDefalutData(); xyChartThemeConfig = getChartDefaultThemeConfig(); - plotColorPalette = xyChartThemeConfig.plotColorPalette; + plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim()); hasSetXAxis = false; hasSetYAxis = false; }; diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index 19d9d35e47..8f8451d3fd 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -15,11 +15,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram const themeConfig = db.getChartThemeConfig(); const chartConfig = db.getChartConfig(); function getDominantBaseLine(horizontalPos: TextVerticalPos) { - return horizontalPos === 'top' - ? 'text-before-edge' - : horizontalPos === 'bottom' - ? 'text-after-edge' - : 'middle'; + return horizontalPos === 'top' ? 'text-before-edge' : 'middle'; } function getTextAnchor(verticalPos: TextHorizontalPos) { diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index 52b765a602..2820bc7914 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -130,20 +130,19 @@ Themes for xychart resides inside xychart attribute so to set the variables use %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% ``` -| Parameter | Description | -| ---------------- | ----------------------------------------------------- | -| backgroundColor | Background color of the whole chart | -| titleColor | Color of the Title text | -| plotBorderColor | Color of the plot border | -| xAxisLableColor | Color of the x-axis labels | -| xAxisTitleColor | Color of the x-axis title | -| xAxisTickColor | Color of the x-axis tick | -| xAxisLineColor | Color of the x-axis line | -| yAxisLableColor | Color of the y-axis labels | -| yAxisTitleColor | Color of the y-axis title | -| yAxisTickColor | Color of the y-axis tick | -| yAxisLineColor | Color of the y-axis line | -| plotColorPalette | Array of colors for the plots eg ["#f3456", "#43445"] | +| Parameter | Description | +| ---------------- | ------------------------------------------------------- | +| backgroundColor | Background color of the whole chart | +| titleColor | Color of the Title text | +| xAxisLableColor | Color of the x-axis labels | +| xAxisTitleColor | Color of the x-axis title | +| xAxisTickColor | Color of the x-axis tick | +| xAxisLineColor | Color of the x-axis line | +| yAxisLableColor | Color of the y-axis labels | +| yAxisTitleColor | Color of the y-axis title | +| yAxisTickColor | Color of the y-axis tick | +| yAxisLineColor | Color of the y-axis line | +| plotColorPalette | String of colors seperated by comma eg "#f3456, #43445" | ## Example on config and theme diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js index db7fd2ba15..663af85016 100644 --- a/packages/mermaid/src/themes/theme-base.js +++ b/packages/mermaid/src/themes/theme-base.js @@ -249,27 +249,17 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, - xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, + xAxisLabelColor: this.xyChart?.xAxisLabelColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, - yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, - plotColorPalette: this.xyChart?.plotColorPalette || [ - '#FFF4DD', - '#FFD8B1', - '#FFA07A', - '#ECEFF1', - '#D6DBDF', - '#C3E0A8', - '#FFB6A4', - '#FFD74D', - '#738FA7', - '#FFFFF0', - ], + plotColorPalette: + this.xyChart?.plotColorPalette || + '#FFF4DD,#FFD8B1,#FFA07A,#ECEFF1,#D6DBDF,#C3E0A8,#FFB6A4,#FFD74D,#738FA7,#FFFFF0', }; /* requirement-diagram */ diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js index c4354736b9..300cf30366 100644 --- a/packages/mermaid/src/themes/theme-dark.js +++ b/packages/mermaid/src/themes/theme-dark.js @@ -255,27 +255,17 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, - xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, + xAxisLabelColor: this.xyChart?.xAxisLabelColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, - yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, - plotColorPalette: this.xyChart?.plotColorPalette || [ - '#3498db', - '#2ecc71', - '#e74c3c', - '#f1c40f', - '#bdc3c7', - '#ffffff', - '#34495e', - '#9b59b6', - '#1abc9c', - '#e67e22', - ], + plotColorPalette: + this.xyChart?.plotColorPalette || + '#3498db,#2ecc71,#e74c3c,#f1c40f,#bdc3c7,#ffffff,#34495e,#9b59b6,#1abc9c,#e67e22', }; /* class */ diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index ea3d20a5af..6aa18fcc78 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -276,27 +276,17 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, - xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, + xAxisLabelColor: this.xyChart?.xAxisLabelColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, - yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, - plotColorPalette: this.xyChart?.plotColorPalette || [ - '#ECECFF', - '#8493A6', - '#FFC3A0', - '#DCDDE1', - '#B8E994', - '#D1A36F', - '#C3CDE6', - '#FFB6C1', - '#496078', - '#F8F3E3', - ], + plotColorPalette: + this.xyChart?.plotColorPalette || + '#ECECFF,#8493A6,#FFC3A0,#DCDDE1,#B8E994,#D1A36F,#C3CDE6,#FFB6C1,#496078,#F8F3E3', }; /* requirement-diagram */ diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js index 0b5300d677..adf337a16c 100644 --- a/packages/mermaid/src/themes/theme-forest.js +++ b/packages/mermaid/src/themes/theme-forest.js @@ -244,27 +244,17 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, - xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, + xAxisLabelColor: this.xyChart?.xAxisLabelColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, - yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, - plotColorPalette: this.xyChart?.plotColorPalette || [ - '#CDE498', - '#FF6B6B', - '#A0D2DB', - '#D7BDE2', - '#F0F0F0', - '#FFC3A0', - '#7FD8BE', - '#FF9A8B', - '#FAF3E0', - '#FFF176', - ], + plotColorPalette: + this.xyChart?.plotColorPalette || + '#CDE498,#FF6B6B,#A0D2DB,#D7BDE2,#F0F0F0,#FFC3A0,#7FD8BE,#FF9A8B,#FAF3E0,#FFF176', }; /* requirement-diagram */ diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js index 26f84c38dd..446a9189d4 100644 --- a/packages/mermaid/src/themes/theme-neutral.js +++ b/packages/mermaid/src/themes/theme-neutral.js @@ -275,27 +275,17 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, - xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, + xAxisLabelColor: this.xyChart?.xAxisLabelColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, - yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, - plotColorPalette: this.xyChart?.plotColorPalette || [ - '#EEE', - '#6BB8E4', - '#8ACB88', - '#C7ACD6', - '#E8DCC2', - '#FFB2A8', - '#FFF380', - '#7E8D91', - '#FFD8B1', - '#FAF3E0', - ], + plotColorPalette: + this.xyChart?.plotColorPalette || + '#EEE,#6BB8E4,#8ACB88,#C7ACD6,#E8DCC2,#FFB2A8,#FFF380,#7E8D91,#FFD8B1,#FAF3E0', }; /* requirement-diagram */ From a344eb48f49ac8cfed27141ff2c90ef728122d19 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 3 Sep 2023 20:48:52 +0530 Subject: [PATCH 035/126] Added cypress test cases --- cypress/integration/rendering/xyChart.spec.js | 230 ++++++++++++++++++ 1 file changed, 230 insertions(+) create mode 100644 cypress/integration/rendering/xyChart.spec.js diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js new file mode 100644 index 0000000000..d9b7f159c8 --- /dev/null +++ b/cypress/integration/rendering/xyChart.spec.js @@ -0,0 +1,230 @@ +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; + +describe('XY Chart', () => { + it('should render the simplest possible chart', () => { + imgSnapshotTest( + ` + xychart-beta + line [10, 30, 20] + `, + {} + ); + cy.get('svg'); + }); + it('Should render a complete chart', () => { + imgSnapshotTest( + ` + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + }); + it('Should render a chart without title', () => { + imgSnapshotTest( + ` + xychart-beta + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); + it('y-axis title not required', () => { + imgSnapshotTest( + ` + xychart-beta + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); + it('Should render a chart without y-axis with different range', () => { + imgSnapshotTest( + ` + xychart-beta + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] + line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] + `, + {} + ); + cy.get('svg'); + }); + it('x axis title not required', () => { + imgSnapshotTest( + ` + xychart-beta + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] + line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] + `, + {} + ); + cy.get('svg'); + }); + it('Multiple plots can be rendered', () => { + imgSnapshotTest( + ` + xychart-beta + line [23, 46, 77, 34] + line [45, 32, 33, 12] + bar [87, 54, 99, 85] + line [78, 88, 22, 4] + line [22, 29, 75, 33] + bar [52, 96, 35, 10] + `, + {} + ); + cy.get('svg'); + }); + it('Decimals and -ve no are supported', () => { + imgSnapshotTest( + ` + xychart-beta + y-axis -2.4 --> 3.5 + line [+1.3, .6, 2.4, -.34] + `, + {} + ); + cy.get('svg'); + }); + it('Render spark line with "plotReservedSpacePercent"', () => { + imgSnapshotTest( + ` + %%{init: {"theme":"dark", "xyChart": { "width":200, "height": 20, "plotReservedSpacePercent": 100}}}%% + xychart-beta + line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] + `, + {} + ); + cy.get('svg'); + }); + it('Render spark bar without displaying other property', () => { + imgSnapshotTest( + ` + %%{init: {"theme":"dark", "xyChart": {"width": 200, "height": 20, "xAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}, "yAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}}}}%% + xychart-beta + bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] + `, + {} + ); + cy.get('svg'); + }); + it('Should use all the config from directive', () => { + imgSnapshotTest( + ` + %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%% + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); + it('Render with showTitle false', () => { + imgSnapshotTest( + ` + %%{init: {"xyChart": {"showTitle": false}}}%% + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); + it('Render with show axis title false', () => { + imgSnapshotTest( + ` + %%{init: {"xyChart": {"yAxis": {"showTitle": false}, "xAxis": {"showTitle": false}}}}%% + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); + it('Render with show axis label false', () => { + imgSnapshotTest( + ` + %%{init: {"xyChart": {"yAxis": {"showLabel": false}, "xAxis": {"showLabel": false}}}}%% + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); + it('Render with show axis tick false', () => { + imgSnapshotTest( + ` + %%{init: {"xyChart": {"xAxis": {"showTick": false}, "yAxis": {"showTick": false}}}}%% + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); + it('Render with show axis line false', () => { + imgSnapshotTest( + ` + %%{init: {"xyChart": {"xAxis": {"showAxisLine": false}, "yAxis": {"showAxisLine": false}}}}%% + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); + it('Render all the theme color', () => { + imgSnapshotTest( + ` + %%{init: {"themeVariables": {"xyChart": {"titleColor": "#ff0000", "backgroundColor": "#f0f8ff", "yAxisLabelColor": "#ee82ee", "yAxisTitleColor": "#7fffd4", "yAxisTickColor": "#87ceeb", "yAxisLineColor": "#ff6347", "xAxisLabelColor": "#7fffd4", "xAxisTitleColor": "#ee82ee", "xAxisTickColor": "#ff6347", "xAxisLineColor": "#87ceeb", "plotColorPalette": "#008000, #faba63"}}}}%% + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); +}); From 7c7d5881b793902af8ff8f2e904158f2704bbba1 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Thu, 7 Sep 2023 12:45:22 +0530 Subject: [PATCH 036/126] Fixed all review comment --- cypress/integration/rendering/xyChart.spec.js | 122 ++++++++++++++++-- demos/xychart.html | 105 +++++++++++---- .../xychart/chartBuilder/Orchestrator.ts | 30 ++--- .../chartBuilder/TextDimensionCalculator.ts | 2 +- .../chartBuilder/components/ChartTitle.ts | 6 +- .../chartBuilder/components/axis/BandAxis.ts | 6 +- .../chartBuilder/components/axis/BaseAxis.ts | 13 +- .../components/axis/LinearAxis.ts | 8 +- .../chartBuilder/components/axis/index.ts | 12 +- .../chartBuilder/components/plot/BarPlot.ts | 33 +++-- .../chartBuilder/components/plot/LinePlot.ts | 2 +- .../chartBuilder/components/plot/index.ts | 8 +- .../diagrams/xychart/chartBuilder/index.ts | 8 +- .../src/diagrams/xychart/parser/xychart.jison | 3 + .../xychart/parser/xychart.jison.spec.ts | 2 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 52 +++----- .../src/diagrams/xychart/xychartDiagram.ts | 2 +- .../src/diagrams/xychart/xychartRenderer.ts | 14 +- 18 files changed, 269 insertions(+), 159 deletions(-) diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js index d9b7f159c8..4199b02d87 100644 --- a/cypress/integration/rendering/xyChart.spec.js +++ b/cypress/integration/rendering/xyChart.spec.js @@ -103,7 +103,14 @@ describe('XY Chart', () => { it('Render spark line with "plotReservedSpacePercent"', () => { imgSnapshotTest( ` - %%{init: {"theme":"dark", "xyChart": { "width":200, "height": 20, "plotReservedSpacePercent": 100}}}%% +--- +config: + theme: dark + xyChart: + width: 200 + height: 20 + plotReservedSpacePercent: 100 +--- xychart-beta line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] `, @@ -114,7 +121,23 @@ describe('XY Chart', () => { it('Render spark bar without displaying other property', () => { imgSnapshotTest( ` - %%{init: {"theme":"dark", "xyChart": {"width": 200, "height": 20, "xAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}, "yAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}}}}%% +--- +config: + theme: dark + xyChart: + width: 200 + height: 20 + xAxis: + showLabel: false + showTitle: false + showTick: false + showAxisLine: false + yAxis: + showLabel: false + showTitle: false + showTick: false + showAxisLine: false +--- xychart-beta bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] `, @@ -137,10 +160,36 @@ describe('XY Chart', () => { ); cy.get('svg'); }); - it('Render with showTitle false', () => { + it('Should use all the config from yaml', () => { imgSnapshotTest( ` - %%{init: {"xyChart": {"showTitle": false}}}%% +--- +config: + theme: forest + xyChart: + width: 1000 + height: 600 + titlePadding: 5 + titleFontSize: 10 + xAxis: + labelFontSize: 20 + labelPadding: 10 + titleFontSize: 30 + titlePadding: 20 + tickLength: 10 + tickWidth: 5 + axisLineWidth: 5 + yAxis: + labelFontSize: 20 + labelPadding: 10 + titleFontSize: 30 + titlePadding: 20 + tickLength: 10 + tickWidth: 5 + axisLineWidth: 5 + chartOrientation: horizontal + plotReservedSpacePercent: 60 +--- xychart-beta title "Sales Revene" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] @@ -155,7 +204,17 @@ describe('XY Chart', () => { it('Render with show axis title false', () => { imgSnapshotTest( ` - %%{init: {"xyChart": {"yAxis": {"showTitle": false}, "xAxis": {"showTitle": false}}}}%% +--- +config: + theme: dark + xyChart: + width: 200 + height: 20 + xAxis: + showTitle: false + yAxis: + showTitle: false +--- xychart-beta title "Sales Revene" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] @@ -170,7 +229,17 @@ describe('XY Chart', () => { it('Render with show axis label false', () => { imgSnapshotTest( ` - %%{init: {"xyChart": {"yAxis": {"showLabel": false}, "xAxis": {"showLabel": false}}}}%% +--- +config: + theme: dark + xyChart: + width: 200 + height: 20 + xAxis: + showLabel: false + yAxis: + showLabel: false +--- xychart-beta title "Sales Revene" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] @@ -185,7 +254,17 @@ describe('XY Chart', () => { it('Render with show axis tick false', () => { imgSnapshotTest( ` - %%{init: {"xyChart": {"xAxis": {"showTick": false}, "yAxis": {"showTick": false}}}}%% +--- +config: + theme: dark + xyChart: + width: 200 + height: 20 + xAxis: + showTick: false + yAxis: + showTick: false +--- xychart-beta title "Sales Revene" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] @@ -200,7 +279,17 @@ describe('XY Chart', () => { it('Render with show axis line false', () => { imgSnapshotTest( ` - %%{init: {"xyChart": {"xAxis": {"showAxisLine": false}, "yAxis": {"showAxisLine": false}}}}%% +--- +config: + theme: dark + xyChart: + width: 200 + height: 20 + xAxis: + showAxisLine: false + yAxis: + showAxisLine: false +--- xychart-beta title "Sales Revene" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] @@ -215,7 +304,22 @@ describe('XY Chart', () => { it('Render all the theme color', () => { imgSnapshotTest( ` - %%{init: {"themeVariables": {"xyChart": {"titleColor": "#ff0000", "backgroundColor": "#f0f8ff", "yAxisLabelColor": "#ee82ee", "yAxisTitleColor": "#7fffd4", "yAxisTickColor": "#87ceeb", "yAxisLineColor": "#ff6347", "xAxisLabelColor": "#7fffd4", "xAxisTitleColor": "#ee82ee", "xAxisTickColor": "#ff6347", "xAxisLineColor": "#87ceeb", "plotColorPalette": "#008000, #faba63"}}}}%% +--- +config: + themeVariables: + xyChart: + titleColor: #ff0000 + backgroundColor: #f0f8ff + yAxisLabelColor: #ee82ee + yAxisTitleColor: #7fffd4 + yAxisTickColor: #87ceeb + yAxisLineColor: #ff6347 + xAxisLabelColor: #7fffd4 + xAxisTitleColor: #ee82ee + xAxisTickColor: #ff6347 + xAxisLineColor: #87ceeb + plotColorPalette: #008000, #faba63 +-- xychart-beta title "Sales Revene" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] diff --git a/demos/xychart.html b/demos/xychart.html index 927047129d..8c74d0847b 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -23,9 +23,8 @@ <h1>XY Charts demos</h1> bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] </pre> - <hr /> - + <h1>XY Charts horizontal</h1> <pre class="mermaid"> xychart-beta horizontal title "Basic xychart" @@ -34,19 +33,8 @@ <h1>XY Charts demos</h1> bar "sample bat" [52, 96, 35, 10] line [23, 46, 75, 43] </pre> - - <h1>XY Charts demos</h1> - <pre class="mermaid"> - xychart-beta - title "Basic xychart" - x-axis "this is x axis" [category1, "category 2", category3, category4] - y-axis yaxisText 10 --> 150 - bar "sample bat" [52, 96, 35, 10] - line [23, 46, 75, 43] - </pre> - <hr /> - <h1>XY Charts demos</h1> + <h1>XY Charts only lines and bar</h1> <pre class="mermaid"> xychart-beta line [23, 46, 77, 34] @@ -54,19 +42,18 @@ <h1>XY Charts demos</h1> line [87, 54, 99, 85] line [78, 88, 22, 4] line [22, 29, 75, 33] - bar "sample bat" [52, 96, 35, 10] + bar [52, 96, 35, 10] </pre> <hr /> - <h1>XY Charts demos</h1> + <h1>XY Charts with +ve and -ve numbers</h1> <pre class="mermaid"> xychart-beta line [+1.3, .6, 2.4, -.34] </pre> - <h1>XY Charts demos</h1> + <h1>XY Charts Bar with multiple category</h1> <pre class="mermaid"> - %%{init: {"xyChart": {"width": 600, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Basic xychart with many categories" x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] @@ -74,7 +61,7 @@ <h1>XY Charts demos</h1> bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99] </pre> - <h1>XY Charts demos</h1> + <h1>XY Charts line with multiple category</h1> <pre class="mermaid"> xychart-beta title "Line chart with many category" @@ -83,7 +70,7 @@ <h1>XY Charts demos</h1> line "sample line" [52, 96, 35, 10, 87, 34, 67, 99] </pre> - <h1>XY Charts demos</h1> + <h1>XY Charts category with large text</h1> <pre class="mermaid"> xychart-beta title "Basic xychart with many categories with category overlap" @@ -92,23 +79,89 @@ <h1>XY Charts demos</h1> bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99] </pre> - <h1>sparkline demos</h1> + <h1>sparkline demo</h1> <pre class="mermaid"> - %%{init: {"theme":"dark", "xyChart": { "width":200, "height": 20, "plotReservedSpacePercent": 100}}}%% +--- +config: + theme: dark + xyChart: + width: 200 + height: 20 + plotReservedSpacePercent: 100 +--- xychart-beta line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] </pre> - <h1>sparkBar demos</h1> + <h1>sparkBar demo</h1> <pre class="mermaid"> - %%{init: {"theme":"dark", "xyChart": {"width": 200, "height": 20, "xAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}, "yAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}}}}%% +--- +config: + theme: dark + xyChart: + width: 200 + height: 20 + plotReservedSpacePercent: 100 +--- xychart-beta bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] </pre> - <h1>XY Charts demos</h1> + <h1>XY Charts demos with all configs</h1> + <pre class="mermaid"> +--- +config: + theme: forest + xyChart: + width: 1000 + height: 600 + titlePadding: 5 + titleFontSize: 10 + xAxis: + labelFontSize: 20 + labelPadding: 10 + titleFontSize: 30 + titlePadding: 20 + tickLength: 10 + tickWidth: 5 + axisLineWidth: 5 + yAxis: + labelFontSize: 20 + labelPadding: 10 + titleFontSize: 30 + titlePadding: 20 + tickLength: 10 + tickWidth: 5 + axisLineWidth: 5 + chartOrientation: horizontal + plotReservedSpacePercent: 60 +--- + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + + </pre> + <h1>XY Charts demos with all theme config</h1> <pre class="mermaid"> - %%{init: {"theme": "dark", "xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%% +--- +config: + themeVariables: + xyChart: + titleColor: #ff0000 + backgroundColor: #f0f8ff + yAxisLabelColor: #ee82ee + yAxisTitleColor: #7fffd4 + yAxisTickColor: #87ceeb + yAxisLineColor: #ff6347 + xAxisLabelColor: #7fffd4 + xAxisTitleColor: #ee82ee + xAxisTickColor: #ff6347 + xAxisLineColor: #87ceeb + plotColorPalette: #008000, #faba63 +--- xychart-beta title "Sales Revene" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index 256a103eb7..75c0319bf3 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,13 +1,17 @@ -import { log } from '../../../logger.js'; -import type { DrawableElem, XYChartData, XYChartThemeConfig, XYChartConfig } from './Interfaces.js'; -import { isBarPlot } from './Interfaces.js'; -import { getChartTitleComponent } from './components/ChartTitle.js'; -import type { ChartComponent } from './Interfaces.js'; +import type { SVGGType } from '../xychartDb.js'; +import type { + ChartComponent, + DrawableElem, + XYChartConfig, + XYChartData, + XYChartThemeConfig, +} from './interfaces.js'; +import { isBarPlot } from './interfaces.js'; import type { Axis } from './components/axis/index.js'; import { getAxis } from './components/axis/index.js'; +import { getChartTitleComponent } from './components/chartTitle.js'; import type { Plot } from './components/plot/index.js'; import { getPlotComponent } from './components/plot/index.js'; -import type { SVGGType } from '../xychartDb.js'; export class Orchestrator { private componentStore: { @@ -70,7 +74,6 @@ export class Orchestrator { width: this.chartConfig.width, height: availableHeight, }); - log.trace('space used by title: ', spaceUsed); plotY = spaceUsed.height; availableHeight -= spaceUsed.height; this.componentStore.xAxis.setAxisPosition('bottom'); @@ -78,14 +81,12 @@ export class Orchestrator { width: availableWidth, height: availableHeight, }); - log.trace('space used by xaxis: ', spaceUsed); availableHeight -= spaceUsed.height; this.componentStore.yAxis.setAxisPosition('left'); spaceUsed = this.componentStore.yAxis.calculateSpace({ width: availableWidth, height: availableHeight, }); - log.trace('space used by yaxis: ', spaceUsed); plotX = spaceUsed.width; availableWidth -= spaceUsed.width; if (availableWidth > 0) { @@ -101,10 +102,6 @@ export class Orchestrator { height: chartHeight, }); - log.trace( - `Final chart dimansion: x = ${plotX}, y = ${plotY}, width = ${chartWidth}, height = ${chartHeight}` - ); - this.componentStore.plot.setBoundingBoxXY({ x: plotX, y: plotY }); this.componentStore.xAxis.setRange([plotX, plotX + chartWidth]); this.componentStore.xAxis.setBoundingBoxXY({ x: plotX, y: plotY + chartHeight }); @@ -136,7 +133,6 @@ export class Orchestrator { width: this.chartConfig.width, height: availableHeight, }); - log.trace('space used by title: ', spaceUsed); titleYEnd = spaceUsed.height; availableHeight -= spaceUsed.height; this.componentStore.xAxis.setAxisPosition('left'); @@ -146,13 +142,11 @@ export class Orchestrator { }); availableWidth -= spaceUsed.width; plotX = spaceUsed.width; - log.trace('space used by xaxis: ', spaceUsed); this.componentStore.yAxis.setAxisPosition('top'); spaceUsed = this.componentStore.yAxis.calculateSpace({ width: availableWidth, height: availableHeight, }); - log.trace('space used by yaxis: ', spaceUsed); availableHeight -= spaceUsed.height; plotY = titleYEnd + spaceUsed.height; if (availableWidth > 0) { @@ -168,10 +162,6 @@ export class Orchestrator { height: chartHeight, }); - log.trace( - `Final chart dimansion: x = ${plotX}, y = ${plotY}, width = ${chartWidth}, height = ${chartHeight}` - ); - this.componentStore.plot.setBoundingBoxXY({ x: plotX, y: plotY }); this.componentStore.yAxis.setRange([plotX, plotX + chartWidth]); this.componentStore.yAxis.setBoundingBoxXY({ x: plotX, y: titleYEnd }); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts index 2fd2d770e7..e9e98c9e39 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts @@ -1,4 +1,4 @@ -import type { Dimension } from './Interfaces.js'; +import type { Dimension } from './interfaces.js'; import { computeDimensionOfText } from '../../../rendering-util/createText.js'; import type { SVGGType } from '../xychartDb.js'; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 18dd38b710..19dacc3ae8 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -8,9 +8,9 @@ import type { XYChartData, XYChartThemeConfig, XYChartConfig, -} from '../Interfaces.js'; -import type { TextDimensionCalculator } from '../TextDimensionCalculator.js'; -import { TextDimensionCalculatorWithFont } from '../TextDimensionCalculator.js'; +} from '../interfaces.js'; +import type { TextDimensionCalculator } from '../textDimensionCalculator.js'; +import { TextDimensionCalculatorWithFont } from '../textDimensionCalculator.js'; export class ChartTitle implements ChartComponent { private boundingRect: BoundingRect; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts index 8c785cf72b..864ef1316e 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts @@ -1,9 +1,9 @@ import type { ScaleBand } from 'd3'; import { scaleBand } from 'd3'; import { log } from '../../../../../logger.js'; -import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; -import { BaseAxis } from './BaseAxis.js'; -import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; +import type { TextDimensionCalculator } from '../../textDimensionCalculator.js'; +import { BaseAxis } from './baseAxis.js'; +import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../interfaces.js'; export class BandAxis extends BaseAxis { private scale: ScaleBand<string>; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index 1f16990285..18e48f54cb 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -1,14 +1,13 @@ -import { log } from '../../../../../logger.js'; import type { BoundingRect, Dimension, DrawableElem, Point, - XYChartAxisThemeConfig, XYChartAxisConfig, -} from '../../Interfaces.js'; -import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; -import type { AxisPosition, Axis } from './index.js'; + XYChartAxisThemeConfig, +} from '../../interfaces.js'; +import type { TextDimensionCalculator } from '../../textDimensionCalculator.js'; +import type { Axis, AxisPosition } from './index.js'; const BAR_WIDTH_TO_TICK_WIDTH_RATIO = 0.7; const MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL = 0.2; @@ -96,7 +95,6 @@ export abstract class BaseAxis implements Axis { const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2; this.labelTextHeight = spaceRequired.height; - log.trace('height required for axis label: ', heightRequired); if (heightRequired <= availableHeight) { availableHeight -= heightRequired; this.showLabel = true; @@ -113,7 +111,6 @@ export abstract class BaseAxis implements Axis { ); const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2; this.titleTextHeight = spaceRequired.height; - log.trace('height required for axis title: ', heightRequired); if (heightRequired <= availableHeight) { availableHeight -= heightRequired; this.showTitle = true; @@ -134,7 +131,6 @@ export abstract class BaseAxis implements Axis { const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.height; this.outerPadding = Math.min(spaceRequired.height / 2, maxPadding); const widthRequired = spaceRequired.width + this.axisConfig.labelPadding * 2; - log.trace('width required for axis label: ', widthRequired); if (widthRequired <= availableWidth) { availableWidth -= widthRequired; this.showLabel = true; @@ -151,7 +147,6 @@ export abstract class BaseAxis implements Axis { ); const widthRequired = spaceRequired.height + this.axisConfig.titlePadding * 2; this.titleTextHeight = spaceRequired.height; - log.trace('width required for axis title: ', widthRequired); if (widthRequired <= availableWidth) { availableWidth -= widthRequired; this.showTitle = true; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index 6f0e2bdbb6..8107732d93 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -1,9 +1,8 @@ import type { ScaleLinear } from 'd3'; import { scaleLinear } from 'd3'; -import { log } from '../../../../../logger.js'; -import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; -import { BaseAxis } from './BaseAxis.js'; -import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; +import type { TextDimensionCalculator } from '../../textDimensionCalculator.js'; +import { BaseAxis } from './baseAxis.js'; +import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../interfaces.js'; export class LinearAxis extends BaseAxis { private scale: ScaleLinear<number, number>; @@ -31,7 +30,6 @@ export class LinearAxis extends BaseAxis { domain.reverse(); // since y-axis in svg start from top } this.scale = scaleLinear().domain(domain).range(this.getRange()); - log.trace('Linear axis final domain, range: ', this.domain, this.getRange()); } getScaleValue(value: number): number { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index a563ad6864..e4b42029da 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -2,13 +2,13 @@ import type { SVGGType } from '../../../xychartDb.js'; import type { AxisDataType, ChartComponent, - XYChartAxisThemeConfig, XYChartAxisConfig, -} from '../../Interfaces.js'; -import { isBandAxisData } from '../../Interfaces.js'; -import { TextDimensionCalculatorWithFont } from '../../TextDimensionCalculator.js'; -import { BandAxis } from './BandAxis.js'; -import { LinearAxis } from './LinearAxis.js'; + XYChartAxisThemeConfig, +} from '../../interfaces.js'; +import { isBandAxisData } from '../../interfaces.js'; +import { TextDimensionCalculatorWithFont } from '../../textDimensionCalculator.js'; +import { BandAxis } from './bandAxis.js'; +import { LinearAxis } from './linearAxis.js'; export type AxisPosition = 'left' | 'right' | 'top' | 'bottom'; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index e6b2e66e9f..cf7d4e516d 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,4 +1,4 @@ -import type { BarPlotData, BoundingRect, DrawableElem, XYChartConfig } from '../../Interfaces.js'; +import type { BarPlotData, BoundingRect, DrawableElem, XYChartConfig } from '../../interfaces.js'; import type { Axis } from '../axis/index.js'; export class BarPlot { @@ -40,22 +40,21 @@ export class BarPlot { })), }, ]; - } else { - return [ - { - groupTexts: ['plot', `bar-plot-${this.plotIndex}`], - type: 'rect', - data: finalData.map((data) => ({ - x: data[0] - barWidthHalf, - y: data[1], - width: barWidth, - height: this.boundingRect.y + this.boundingRect.height - data[1], - fill: this.barData.fill, - strokeWidth: 0, - strokeFill: this.barData.fill, - })), - }, - ]; } + return [ + { + groupTexts: ['plot', `bar-plot-${this.plotIndex}`], + type: 'rect', + data: finalData.map((data) => ({ + x: data[0] - barWidthHalf, + y: data[1], + width: barWidth, + height: this.boundingRect.y + this.boundingRect.height - data[1], + fill: this.barData.fill, + strokeWidth: 0, + strokeFill: this.barData.fill, + })), + }, + ]; } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index e4ab886ea7..d8d0666de3 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -1,5 +1,5 @@ import { line } from 'd3'; -import type { DrawableElem, LinePlotData, XYChartConfig } from '../../Interfaces.js'; +import type { DrawableElem, LinePlotData, XYChartConfig } from '../../interfaces.js'; import type { Axis } from '../axis/index.js'; export class LinePlot { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 3707923793..94ab0127a5 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -6,11 +6,11 @@ import type { Point, XYChartThemeConfig, XYChartConfig, -} from '../../Interfaces.js'; +} from '../../interfaces.js'; import type { Axis } from '../axis/index.js'; -import type { ChartComponent } from '../../Interfaces.js'; -import { LinePlot } from './LinePlot.js'; -import { BarPlot } from './BarPlot.js'; +import type { ChartComponent } from '../../interfaces.js'; +import { LinePlot } from './linePlot.js'; +import { BarPlot } from './barPlot.js'; export interface Plot extends ChartComponent { setAxes(xAxis: Axis, yAxis: Axis): void; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 356f0b4522..2dba84c2c1 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -1,7 +1,6 @@ -import { log } from '../../../logger.js'; import type { SVGGType } from '../xychartDb.js'; -import type { DrawableElem, XYChartData, XYChartConfig, XYChartThemeConfig } from './Interfaces.js'; -import { Orchestrator } from './Orchestrator.js'; +import type { DrawableElem, XYChartConfig, XYChartData, XYChartThemeConfig } from './interfaces.js'; +import { Orchestrator } from './orchestrator.js'; export class XYChartBuilder { static build( @@ -10,9 +9,6 @@ export class XYChartBuilder { chartThemeConfig: XYChartThemeConfig, tmpSVGGElem: SVGGType ): DrawableElem[] { - log.trace(`Build start with Config: ${JSON.stringify(config, null, 2)}`); - log.trace(`Build start with ChartData: ${JSON.stringify(chartData, null, 2)}`); - log.trace(`Build start with ChartThemeConfig: ${JSON.stringify(chartThemeConfig, null, 2)}`); const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGElem); return orchestrator.getDrawableElement(); } diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 8666dda3b4..987132d17a 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -104,6 +104,9 @@ statement | LINE text plotData { yy.setLineData($text, $plotData); } | BAR plotData { yy.setBarData({text: '', type: 'text'}, $plotData); } | BAR text plotData { yy.setBarData($text, $plotData); } + | acc_title acc_title_value { $$=$acc_title_value.trim();yy.setAccTitle($$); } + | acc_descr acc_descr_value { $$=$acc_descr_value.trim();yy.setAccDescription($$); } + | acc_descr_multiline_value { $$=$acc_descr_multiline_value.trim();yy.setAccDescription($$); } ; plotData diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 6ccc06c584..23fdb8ae8b 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -1,4 +1,4 @@ -// @ts-ignore: TODO Fix ts errors +// @ts-ignore: Jison doesn't support type. import { parser } from './xychart.jison'; import type { Mock } from 'vitest'; import { vi } from 'vitest'; diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index b585b3ba00..72550ed55d 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -1,29 +1,28 @@ // @ts-ignore: TODO Fix ts errors -import { adjust, channel } from 'khroma'; import type { Selection } from 'd3-selection'; -import mermaidAPI from '../../mermaidAPI.js'; -import * as configApi from '../../config.js'; -import defaultConfig from '../../defaultConfig.js'; -import { sanitizeText } from '../common/common.js'; import { - setAccTitle, + clear as commonClear, + getAccDescription, getAccTitle, - setDiagramTitle, getDiagramTitle, - getAccDescription, setAccDescription, - clear as commonClear, + setAccTitle, + setDiagramTitle, } from '../../commonDb.js'; +import * as configApi from '../../config.js'; +import defaultConfig from '../../defaultConfig.js'; +import { getThemeVariables } from '../../themes/theme-default.js'; +import { cleanAndMerge } from '../../utils.js'; +import { sanitizeText } from '../common/common.js'; import { XYChartBuilder } from './chartBuilder/index.js'; import type { DrawableElem, SimplePlotDataType, + XYChartConfig, XYChartData, XYChartThemeConfig, - XYChartConfig, -} from './chartBuilder/Interfaces.js'; -import { isBandAxisData, isLinearAxisData } from './chartBuilder/Interfaces.js'; -import { getThemeVariables } from '../../themes/theme-default.js'; +} from './chartBuilder/interfaces.js'; +import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js'; export type SVGGType = Selection<SVGGElement, unknown, Element | null, unknown>; @@ -46,25 +45,14 @@ interface NormalTextType { function getChartDefaultThemeConfig(): XYChartThemeConfig { const defaultThemeVariables = getThemeVariables(); const config = configApi.getConfig(); - return { - ...defaultThemeVariables.xyChart, - ...config.themeVariables?.xyChart, - }; + return cleanAndMerge(defaultThemeVariables.xyChart, config.themeVariables.xyChart); } function getChartDefaultConfig(): XYChartConfig { const config = configApi.getConfig(); - return { - ...(defaultConfig.xyChart as XYChartConfig), - ...config.xyChart, - yAxis: { - ...(defaultConfig.xyChart as XYChartConfig).yAxis, - ...config.xyChart?.yAxis, - }, - xAxis: { - ...(defaultConfig.xyChart as XYChartConfig).xAxis, - ...config.xyChart?.xAxis, - }, - }; + return cleanAndMerge<XYChartConfig>( + defaultConfig.xyChart as XYChartConfig, + config.xyChart as XYChartConfig + ); } function getChartDefalutData(): XYChartData { @@ -90,11 +78,6 @@ function textSanitizer(text: string) { return sanitizeText(text.trim(), config); } -function parseDirective(statement: string, context: string, type: string) { - // @ts-ignore: TODO Fix ts errors - mermaidAPI.parseDirective(this, statement, context, type); -} - function setTmpSVGG(SVGG: SVGGType) { tmpSVGGElem = SVGG; } @@ -228,7 +211,6 @@ const clear = function () { export default { getDrawableElem, - parseDirective, clear, setAccTitle, getAccTitle, diff --git a/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts b/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts index c4e913adc3..2f09c10a24 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts @@ -1,5 +1,5 @@ import type { DiagramDefinition } from '../../diagram-api/types.js'; -// @ts-ignore: TODO Fix ts errors +// @ts-ignore: Jison doesn't support types. import parser from './parser/xychart.jison'; import db from './xychartDb.js'; import renderer from './xychartRenderer.js'; diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index 8f8451d3fd..90760008bd 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -1,14 +1,14 @@ import type { Diagram } from '../../Diagram.js'; import { log } from '../../logger.js'; +import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import type { DrawableElem, TextElem, TextHorizontalPos, TextVerticalPos, -} from './chartBuilder/Interfaces.js'; +} from './chartBuilder/interfaces.js'; import type XYChartDB from './xychartDb.js'; -import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { const db = diagObj.db as typeof XYChartDB; @@ -68,18 +68,8 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram for (const shape of shapes) { if (shape.data.length === 0) { - log.trace( - `Skipped drawing of shape of type: ${shape.type} with data: ${JSON.stringify( - shape.data, - null, - 2 - )}` - ); continue; } - log.trace( - `Drawing shape of type: ${shape.type} with data: ${JSON.stringify(shape.data, null, 2)}` - ); const shapeGroup = getGroup(shape.groupTexts); From fae648c2538c62dba8d832309a9873916feb1ea5 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Thu, 7 Sep 2023 13:16:46 +0530 Subject: [PATCH 037/126] Added the file name changes --- cypress/integration/rendering/xyChart.spec.js | 14 +------------- .../components/axis/{BandAxis.ts => bandAxis.ts} | 0 .../components/axis/{BaseAxis.ts => baseAxis.ts} | 0 .../axis/{LinearAxis.ts => linearAxis.ts} | 0 .../components/{ChartTitle.ts => chartTitle.ts} | 0 .../components/plot/{BarPlot.ts => barPlot.ts} | 0 .../components/plot/{LinePlot.ts => linePlot.ts} | 0 .../chartBuilder/{Interfaces.ts => interfaces.ts} | 0 .../{Orchestrator.ts => orchestrator.ts} | 0 ...ionCalculator.ts => textDimensionCalculator.ts} | 0 packages/mermaid/src/diagrams/xychart/xychartDb.ts | 3 +-- 11 files changed, 2 insertions(+), 15 deletions(-) rename packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/{BandAxis.ts => bandAxis.ts} (100%) rename packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/{BaseAxis.ts => baseAxis.ts} (100%) rename packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/{LinearAxis.ts => linearAxis.ts} (100%) rename packages/mermaid/src/diagrams/xychart/chartBuilder/components/{ChartTitle.ts => chartTitle.ts} (100%) rename packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/{BarPlot.ts => barPlot.ts} (100%) rename packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/{LinePlot.ts => linePlot.ts} (100%) rename packages/mermaid/src/diagrams/xychart/chartBuilder/{Interfaces.ts => interfaces.ts} (100%) rename packages/mermaid/src/diagrams/xychart/chartBuilder/{Orchestrator.ts => orchestrator.ts} (100%) rename packages/mermaid/src/diagrams/xychart/chartBuilder/{TextDimensionCalculator.ts => textDimensionCalculator.ts} (100%) diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js index 4199b02d87..1fdb21aee7 100644 --- a/cypress/integration/rendering/xyChart.spec.js +++ b/cypress/integration/rendering/xyChart.spec.js @@ -206,10 +206,7 @@ config: ` --- config: - theme: dark xyChart: - width: 200 - height: 20 xAxis: showTitle: false yAxis: @@ -231,10 +228,7 @@ config: ` --- config: - theme: dark xyChart: - width: 200 - height: 20 xAxis: showLabel: false yAxis: @@ -256,10 +250,7 @@ config: ` --- config: - theme: dark xyChart: - width: 200 - height: 20 xAxis: showTick: false yAxis: @@ -281,10 +272,7 @@ config: ` --- config: - theme: dark xyChart: - width: 200 - height: 20 xAxis: showAxisLine: false yAxis: @@ -319,7 +307,7 @@ config: xAxisTickColor: #ff6347 xAxisLineColor: #87ceeb plotColorPalette: #008000, #faba63 --- +--- xychart-beta title "Sales Revene" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/bandAxis.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/bandAxis.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/linearAxis.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/linearAxis.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 72550ed55d..7bd27c1a94 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -1,4 +1,3 @@ -// @ts-ignore: TODO Fix ts errors import type { Selection } from 'd3-selection'; import { clear as commonClear, @@ -8,7 +7,7 @@ import { setAccDescription, setAccTitle, setDiagramTitle, -} from '../../commonDb.js'; +} from '../common/commonDb.js'; import * as configApi from '../../config.js'; import defaultConfig from '../../defaultConfig.js'; import { getThemeVariables } from '../../themes/theme-default.js'; From b98217e3c3085b451e812915c539853e7ac9378f Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Thu, 7 Sep 2023 13:31:52 +0530 Subject: [PATCH 038/126] Fix YAML themeVariables config --- cypress/integration/rendering/xyChart.spec.js | 22 +++++++++---------- demos/xychart.html | 22 +++++++++---------- docs/syntax/xyChart.md | 20 +++++++++++++++-- packages/mermaid/src/docs/syntax/xyChart.md | 10 ++++++++- 4 files changed, 49 insertions(+), 25 deletions(-) diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js index 1fdb21aee7..3948dc71e2 100644 --- a/cypress/integration/rendering/xyChart.spec.js +++ b/cypress/integration/rendering/xyChart.spec.js @@ -296,17 +296,17 @@ config: config: themeVariables: xyChart: - titleColor: #ff0000 - backgroundColor: #f0f8ff - yAxisLabelColor: #ee82ee - yAxisTitleColor: #7fffd4 - yAxisTickColor: #87ceeb - yAxisLineColor: #ff6347 - xAxisLabelColor: #7fffd4 - xAxisTitleColor: #ee82ee - xAxisTickColor: #ff6347 - xAxisLineColor: #87ceeb - plotColorPalette: #008000, #faba63 + titleColor: "#ff0000" + backgroundColor: "#f0f8ff" + yAxisLabelColor: "#ee82ee" + yAxisTitleColor: "#7fffd4" + yAxisTickColor: "#87ceeb" + yAxisLineColor: "#ff6347" + xAxisLabelColor: "#7fffd4" + xAxisTitleColor: "#ee82ee" + xAxisTickColor: "#ff6347" + xAxisLineColor: "#87ceeb" + plotColorPalette: "#008000, #faba63" --- xychart-beta title "Sales Revene" diff --git a/demos/xychart.html b/demos/xychart.html index 8c74d0847b..1d8bad78b8 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -150,17 +150,17 @@ <h1>XY Charts demos with all theme config</h1> config: themeVariables: xyChart: - titleColor: #ff0000 - backgroundColor: #f0f8ff - yAxisLabelColor: #ee82ee - yAxisTitleColor: #7fffd4 - yAxisTickColor: #87ceeb - yAxisLineColor: #ff6347 - xAxisLabelColor: #7fffd4 - xAxisTitleColor: #ee82ee - xAxisTickColor: #ff6347 - xAxisLineColor: #87ceeb - plotColorPalette: #008000, #faba63 + titleColor: "#ff0000" + backgroundColor: "#f0f8ff" + yAxisLabelColor: "#ee82ee" + yAxisTitleColor: "#7fffd4" + yAxisTickColor: "#87ceeb" + yAxisLineColor: "#ff6347" + xAxisLabelColor: "#7fffd4" + xAxisTitleColor: "#ee82ee" + xAxisTickColor: "#ff6347" + xAxisLineColor: "#87ceeb" + plotColorPalette: "#008000, #faba63" --- xychart-beta title "Sales Revene" diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index 4ee83bdba8..255c3c089c 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -152,7 +152,15 @@ Every grammer are optional other than the chart name and one data set, so you wi ## Example on config and theme ```mermaid-example -%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% +--- +config: + xyChart: + width: 900 + height: 600 + themeVariables: + xyChart: + titleColor: "#ff0000" +--- xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] @@ -162,7 +170,15 @@ xychart-beta ``` ```mermaid -%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% +--- +config: + xyChart: + width: 900 + height: 600 + themeVariables: + xyChart: + titleColor: "#ff0000" +--- xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index 2820bc7914..ef089eb435 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -147,7 +147,15 @@ Themes for xychart resides inside xychart attribute so to set the variables use ## Example on config and theme ```mermaid-example -%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% +--- +config: + xyChart: + width: 900 + height: 600 + themeVariables: + xyChart: + titleColor: "#ff0000" +--- xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] From 6e9eeb78c63583da7bc8a0474f85d693bb7030f7 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 9 Sep 2023 16:11:18 +0530 Subject: [PATCH 039/126] removed string concat to string builder --- packages/mermaid/src/diagrams/xychart/xychartRenderer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index 90760008bd..1f4d36e8ab 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -39,7 +39,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram // @ts-ignore: TODO Fix ts errors configureSvgSize(svg, chartConfig.height, chartConfig.width, true); - svg.attr('viewBox', '0 0 ' + chartConfig.width + ' ' + chartConfig.height); + svg.attr('viewBox', `0 0 ${chartConfig.width} ${chartConfig.height}`); background.attr('fill', themeConfig.backgroundColor); From e061489b841939e3a74758c622a8e6ec05180dc9 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Tue, 19 Sep 2023 21:09:31 +0530 Subject: [PATCH 040/126] Added review changes --- cypress/integration/rendering/xyChart.spec.js | 368 +++++++++--------- docs/syntax/xyChart.md | 4 +- .../chartBuilder/components/axis/baseAxis.ts | 13 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 6 +- packages/mermaid/src/docs/syntax/xyChart.md | 4 +- 5 files changed, 198 insertions(+), 197 deletions(-) diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js index 3948dc71e2..85d998c50b 100644 --- a/cypress/integration/rendering/xyChart.spec.js +++ b/cypress/integration/rendering/xyChart.spec.js @@ -4,8 +4,8 @@ describe('XY Chart', () => { it('should render the simplest possible chart', () => { imgSnapshotTest( ` - xychart-beta - line [10, 30, 20] + xychart-beta + line [10, 30, 20] `, {} ); @@ -14,12 +14,12 @@ describe('XY Chart', () => { it('Should render a complete chart', () => { imgSnapshotTest( ` - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -27,11 +27,11 @@ describe('XY Chart', () => { it('Should render a chart without title', () => { imgSnapshotTest( ` - xychart-beta - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + xychart-beta + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -40,11 +40,11 @@ describe('XY Chart', () => { it('y-axis title not required', () => { imgSnapshotTest( ` - xychart-beta - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + xychart-beta + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -53,10 +53,10 @@ describe('XY Chart', () => { it('Should render a chart without y-axis with different range', () => { imgSnapshotTest( ` - xychart-beta - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] - line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] + xychart-beta + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] + line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] `, {} ); @@ -65,10 +65,10 @@ describe('XY Chart', () => { it('x axis title not required', () => { imgSnapshotTest( ` - xychart-beta - x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] - line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] + xychart-beta + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] + line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] `, {} ); @@ -77,24 +77,24 @@ describe('XY Chart', () => { it('Multiple plots can be rendered', () => { imgSnapshotTest( ` - xychart-beta - line [23, 46, 77, 34] - line [45, 32, 33, 12] - bar [87, 54, 99, 85] - line [78, 88, 22, 4] - line [22, 29, 75, 33] - bar [52, 96, 35, 10] + xychart-beta + line [23, 46, 77, 34] + line [45, 32, 33, 12] + bar [87, 54, 99, 85] + line [78, 88, 22, 4] + line [22, 29, 75, 33] + bar [52, 96, 35, 10] `, {} ); cy.get('svg'); }); - it('Decimals and -ve no are supported', () => { + it('Decimals and negative numbers are supported', () => { imgSnapshotTest( ` - xychart-beta - y-axis -2.4 --> 3.5 - line [+1.3, .6, 2.4, -.34] + xychart-beta + y-axis -2.4 --> 3.5 + line [+1.3, .6, 2.4, -.34] `, {} ); @@ -103,16 +103,16 @@ describe('XY Chart', () => { it('Render spark line with "plotReservedSpacePercent"', () => { imgSnapshotTest( ` ---- -config: - theme: dark - xyChart: - width: 200 - height: 20 - plotReservedSpacePercent: 100 ---- - xychart-beta - line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] + --- + config: + theme: dark + xyChart: + width: 200 + height: 20 + plotReservedSpacePercent: 100 + --- + xychart-beta + line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] `, {} ); @@ -121,25 +121,25 @@ config: it('Render spark bar without displaying other property', () => { imgSnapshotTest( ` ---- -config: - theme: dark - xyChart: - width: 200 - height: 20 - xAxis: - showLabel: false - showTitle: false - showTick: false - showAxisLine: false - yAxis: - showLabel: false - showTitle: false - showTick: false - showAxisLine: false ---- - xychart-beta - bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] + --- + config: + theme: dark + xyChart: + width: 200 + height: 20 + xAxis: + showLabel: false + showTitle: false + showTick: false + showAxisLine: false + yAxis: + showLabel: false + showTitle: false + showTick: false + showAxisLine: false + --- + xychart-beta + bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] `, {} ); @@ -148,13 +148,13 @@ config: it('Should use all the config from directive', () => { imgSnapshotTest( ` - %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%% - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%% + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -163,39 +163,39 @@ config: it('Should use all the config from yaml', () => { imgSnapshotTest( ` ---- -config: - theme: forest - xyChart: - width: 1000 - height: 600 - titlePadding: 5 - titleFontSize: 10 - xAxis: - labelFontSize: 20 - labelPadding: 10 - titleFontSize: 30 - titlePadding: 20 - tickLength: 10 - tickWidth: 5 - axisLineWidth: 5 - yAxis: - labelFontSize: 20 - labelPadding: 10 - titleFontSize: 30 - titlePadding: 20 - tickLength: 10 - tickWidth: 5 - axisLineWidth: 5 - chartOrientation: horizontal - plotReservedSpacePercent: 60 ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + theme: forest + xyChart: + width: 1000 + height: 600 + titlePadding: 5 + titleFontSize: 10 + xAxis: + labelFontSize: 20 + labelPadding: 10 + titleFontSize: 30 + titlePadding: 20 + tickLength: 10 + tickWidth: 5 + axisLineWidth: 5 + yAxis: + labelFontSize: 20 + labelPadding: 10 + titleFontSize: 30 + titlePadding: 20 + tickLength: 10 + tickWidth: 5 + axisLineWidth: 5 + chartOrientation: horizontal + plotReservedSpacePercent: 60 + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -204,20 +204,20 @@ config: it('Render with show axis title false', () => { imgSnapshotTest( ` ---- -config: - xyChart: - xAxis: - showTitle: false - yAxis: - showTitle: false ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + xyChart: + xAxis: + showTitle: false + yAxis: + showTitle: false + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -226,20 +226,20 @@ config: it('Render with show axis label false', () => { imgSnapshotTest( ` ---- -config: - xyChart: - xAxis: - showLabel: false - yAxis: - showLabel: false ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + xyChart: + xAxis: + showLabel: false + yAxis: + showLabel: false + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -248,20 +248,20 @@ config: it('Render with show axis tick false', () => { imgSnapshotTest( ` ---- -config: - xyChart: - xAxis: - showTick: false - yAxis: - showTick: false ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + xyChart: + xAxis: + showTick: false + yAxis: + showTick: false + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -270,20 +270,20 @@ config: it('Render with show axis line false', () => { imgSnapshotTest( ` ---- -config: - xyChart: - xAxis: - showAxisLine: false - yAxis: - showAxisLine: false ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + xyChart: + xAxis: + showAxisLine: false + yAxis: + showAxisLine: false + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -292,28 +292,28 @@ config: it('Render all the theme color', () => { imgSnapshotTest( ` ---- -config: - themeVariables: - xyChart: - titleColor: "#ff0000" - backgroundColor: "#f0f8ff" - yAxisLabelColor: "#ee82ee" - yAxisTitleColor: "#7fffd4" - yAxisTickColor: "#87ceeb" - yAxisLineColor: "#ff6347" - xAxisLabelColor: "#7fffd4" - xAxisTitleColor: "#ee82ee" - xAxisTickColor: "#ff6347" - xAxisLineColor: "#87ceeb" - plotColorPalette: "#008000, #faba63" ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + themeVariables: + xyChart: + titleColor: "#ff0000" + backgroundColor: "#f0f8ff" + yAxisLabelColor: "#ee82ee" + yAxisTitleColor: "#7fffd4" + yAxisTickColor: "#87ceeb" + yAxisLineColor: "#ff6347" + xAxisLabelColor: "#7fffd4" + xAxisTitleColor: "#ee82ee" + xAxisTickColor: "#ff6347" + xAxisLineColor: "#87ceeb" + plotColorPalette: "#008000, #faba63" + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index 255c3c089c..964a1e6da8 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -33,7 +33,7 @@ xychart-beta ## Syntax > **Note** -> all text values can be single word without ", if multiple line required we have to use ". +> All text values that contain only one word can be written without `"`. If a text value has many words in it, specifically if it contains spaces, enclose the value in `"` ### Orientations @@ -49,7 +49,7 @@ The title is a short description of the chart and it will always render on top o #### Example xychart-beta - title "This is a sample example" + title "This is a simple example" ... > **Note** diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts index 18e48f54cb..c3240a4a7b 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts @@ -51,6 +51,7 @@ export abstract class BaseAxis implements Axis { setAxisPosition(axisPosition: AxisPosition): void { this.axisPosition = axisPosition; + this.setRange(this.range); } abstract getScaleValue(value: number | string): number; @@ -174,7 +175,7 @@ export abstract class BaseAxis implements Axis { this.boundingRect.y = point.y; } - private getDrawaableElementsForLeftAxis(): DrawableElem[] { + private getDrawableElementsForLeftAxis(): DrawableElem[] { const drawableElement: DrawableElem[] = []; if (this.showAxisLine) { const x = this.boundingRect.x + this.boundingRect.width - this.axisConfig.axisLineWidth / 2; @@ -250,7 +251,7 @@ export abstract class BaseAxis implements Axis { } return drawableElement; } - private getDrawaableElementsForBottomAxis(): DrawableElem[] { + private getDrawableElementsForBottomAxis(): DrawableElem[] { const drawableElement: DrawableElem[] = []; if (this.showAxisLine) { const y = this.boundingRect.y + this.axisConfig.axisLineWidth / 2; @@ -326,7 +327,7 @@ export abstract class BaseAxis implements Axis { } return drawableElement; } - private getDrawaableElementsForTopAxis(): DrawableElem[] { + private getDrawableElementsForTopAxis(): DrawableElem[] { const drawableElement: DrawableElem[] = []; if (this.showAxisLine) { const y = this.boundingRect.y + this.boundingRect.height - this.axisConfig.axisLineWidth / 2; @@ -405,16 +406,16 @@ export abstract class BaseAxis implements Axis { getDrawableElements(): DrawableElem[] { if (this.axisPosition === 'left') { - return this.getDrawaableElementsForLeftAxis(); + return this.getDrawableElementsForLeftAxis(); } if (this.axisPosition === 'right') { throw Error('Drawing of right axis is not implemented'); } if (this.axisPosition === 'bottom') { - return this.getDrawaableElementsForBottomAxis(); + return this.getDrawableElementsForBottomAxis(); } if (this.axisPosition === 'top') { - return this.getDrawaableElementsForTopAxis(); + return this.getDrawableElementsForTopAxis(); } return []; } diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 7bd27c1a94..7271c04689 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -31,7 +31,7 @@ let tmpSVGGElem: SVGGType; let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); -let xyChartData: XYChartData = getChartDefalutData(); +let xyChartData: XYChartData = getChartDefaultData(); let plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim()); let hasSetXAxis = false; let hasSetYAxis = false; @@ -54,7 +54,7 @@ function getChartDefaultConfig(): XYChartConfig { ); } -function getChartDefalutData(): XYChartData { +function getChartDefaultData(): XYChartData { return { yAxis: { type: 'linear', @@ -201,7 +201,7 @@ const clear = function () { commonClear(); plotIndex = 0; xyChartConfig = getChartDefaultConfig(); - xyChartData = getChartDefalutData(); + xyChartData = getChartDefaultData(); xyChartThemeConfig = getChartDefaultThemeConfig(); plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim()); hasSetXAxis = false; diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index ef089eb435..3b30601815 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -18,7 +18,7 @@ xychart-beta ## Syntax ```note -all text values can be single word without ", if multiple line required we have to use ". +All text values that contain only one word can be written without `"`. If a text value has many words in it, specifically if it contains spaces, enclose the value in `"` ``` ### Orientations @@ -38,7 +38,7 @@ The title is a short description of the chart and it will always render on top o ``` xychart-beta - title "This is a sample example" + title "This is a simple example" ... ``` From f01f2dfcef53dcc118f841a26384a1dc6a7840c7 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Tue, 19 Sep 2023 21:18:06 +0530 Subject: [PATCH 041/126] Fix formatting in doc file --- docs/syntax/xyChart.md | 2 +- packages/mermaid/src/docs/syntax/xyChart.md | 34 ++++++++++----------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index 08d03a434b..a927ca5417 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -42,7 +42,7 @@ The chart can be drawn horizontal or vertical, default value is vertical. xychart-beta horizontal ... -### Title. +### Title The title is a short description of the chart and it will always render on top of the chart. diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index 3b30601815..ffd0c16c2c 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -23,7 +23,7 @@ All text values that contain only one word can be written without `"`. If a text ### Orientations -The chart can be drawn horizontal or vertical, default value is vertical +The chart can be drawn horizontal or vertical, default value is vertical. ``` xychart-beta horizontal @@ -57,7 +57,7 @@ The x-axis primarily serves as a categorical value, although it can also functio ### y-axis -The y-axis is employed to represent numerical range values, it can't have categorical values. +The y-axis is employed to represent numerical range values, it cannot have categorical values. #### Example @@ -86,7 +86,7 @@ A bar chart offers the capability to graphically depict bars. #### Simplest example -Every grammer are optional other than the chart name and one data set, so you will be able to draw a chart will a simple config like +The only two things required are the chart name (`xychart-beta`) and one data set. So you will be able to draw a chart with a simple config like ``` xychart-beta @@ -104,7 +104,7 @@ xychart-beta | showTitle | Title to be shown or not | true | | xAxis | xAxis configuration | AxisConfig | | yAxis | yAxis configuration | AxisConfig | -| chartOrientation | ('vertical' or 'horizontal') | 'vertical' | +| chartOrientation | 'vertical' or 'horizontal' | 'vertical' | | plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | ### AxisConfig @@ -130,19 +130,19 @@ Themes for xychart resides inside xychart attribute so to set the variables use %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% ``` -| Parameter | Description | -| ---------------- | ------------------------------------------------------- | -| backgroundColor | Background color of the whole chart | -| titleColor | Color of the Title text | -| xAxisLableColor | Color of the x-axis labels | -| xAxisTitleColor | Color of the x-axis title | -| xAxisTickColor | Color of the x-axis tick | -| xAxisLineColor | Color of the x-axis line | -| yAxisLableColor | Color of the y-axis labels | -| yAxisTitleColor | Color of the y-axis title | -| yAxisTickColor | Color of the y-axis tick | -| yAxisLineColor | Color of the y-axis line | -| plotColorPalette | String of colors seperated by comma eg "#f3456, #43445" | +| Parameter | Description | +| ---------------- | --------------------------------------------------------- | +| backgroundColor | Background color of the whole chart | +| titleColor | Color of the Title text | +| xAxisLableColor | Color of the x-axis labels | +| xAxisTitleColor | Color of the x-axis title | +| xAxisTickColor | Color of the x-axis tick | +| xAxisLineColor | Color of the x-axis line | +| yAxisLableColor | Color of the y-axis labels | +| yAxisTitleColor | Color of the y-axis title | +| yAxisTickColor | Color of the y-axis tick | +| yAxisLineColor | Color of the y-axis line | +| plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" | ## Example on config and theme From f56796c7cf4d3f2b169b98deaf00b65df9cae225 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Wed, 20 Sep 2023 19:57:48 +0530 Subject: [PATCH 042/126] Fix a review request in the docs --- docs/syntax/xyChart.md | 2 +- packages/mermaid/src/docs/syntax/xyChart.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index a927ca5417..7e91863f9a 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -53,7 +53,7 @@ The title is a short description of the chart and it will always render on top o ... > **Note** -> if the title single word no need to use ", but if it has space " is needed +> If the title is a single word one no need to use `"`, but if it has space `"` is needed ### x-axis diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index ffd0c16c2c..8edfecbea3 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -43,7 +43,7 @@ xychart-beta ``` ```note -if the title single word no need to use ", but if it has space " is needed +If the title is a single word one no need to use `"`, but if it has space `"` is needed ``` ### x-axis From 0d348b799472d2f1d2818afac9d9f936acb893b2 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Fri, 29 Sep 2023 18:59:05 +0530 Subject: [PATCH 043/126] Updated code review changes --- .../chartBuilder/components/axis/index.ts | 6 +++--- .../chartBuilder/components/chartTitle.ts | 6 +++--- .../chartBuilder/components/plot/index.ts | 4 ++-- .../src/diagrams/xychart/chartBuilder/index.ts | 6 +++--- .../xychart/chartBuilder/orchestrator.ts | 10 +++++----- .../chartBuilder/textDimensionCalculator.ts | 10 ++++++---- .../mermaid/src/diagrams/xychart/xychartDb.ts | 12 +++++------- .../src/diagrams/xychart/xychartDetector.ts | 10 +++++++--- .../mermaid/src/rendering-util/createText.ts | 18 +++++++++++++----- 9 files changed, 47 insertions(+), 35 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index e4b42029da..3f1eca5476 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,4 +1,4 @@ -import type { SVGGType } from '../../../xychartDb.js'; +import type { Group } from '../../../../../diagram-api/types.js'; import type { AxisDataType, ChartComponent, @@ -25,9 +25,9 @@ export function getAxis( data: AxisDataType, axisConfig: XYChartAxisConfig, axisThemeConfig: XYChartAxisThemeConfig, - tmpSVGGElem: SVGGType + tmpSVGGroup: Group ): Axis { - const textDimansionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGElem); + const textDimansionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup); if (isBandAxisData(data)) { return new BandAxis( axisConfig, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts index 19dacc3ae8..bbab56bdc1 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts @@ -1,4 +1,4 @@ -import type { SVGGType } from '../../xychartDb.js'; +import type { Group } from '../../../../diagram-api/types.js'; import type { BoundingRect, ChartComponent, @@ -84,8 +84,8 @@ export function getChartTitleComponent( chartConfig: XYChartConfig, chartData: XYChartData, chartThemeConfig: XYChartThemeConfig, - tmpSVGGElem: SVGGType + tmpSVGGroup: Group ): ChartComponent { - const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGElem); + const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup); return new ChartTitle(textDimensionCalculator, chartConfig, chartData, chartThemeConfig); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 94ab0127a5..2a7b4a2838 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -16,7 +16,7 @@ export interface Plot extends ChartComponent { setAxes(xAxis: Axis, yAxis: Axis): void; } -export class Plot implements Plot { +export class BasePlot implements Plot { private boundingRect: BoundingRect; private xAxis?: Axis; private yAxis?: Axis; @@ -93,5 +93,5 @@ export function getPlotComponent( chartData: XYChartData, chartThemeConfig: XYChartThemeConfig ): Plot { - return new Plot(chartConfig, chartData, chartThemeConfig); + return new BasePlot(chartConfig, chartData, chartThemeConfig); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 2dba84c2c1..192eb47f62 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -1,4 +1,4 @@ -import type { SVGGType } from '../xychartDb.js'; +import type { Group } from '../../../diagram-api/types.js'; import type { DrawableElem, XYChartConfig, XYChartData, XYChartThemeConfig } from './interfaces.js'; import { Orchestrator } from './orchestrator.js'; @@ -7,9 +7,9 @@ export class XYChartBuilder { config: XYChartConfig, chartData: XYChartData, chartThemeConfig: XYChartThemeConfig, - tmpSVGGElem: SVGGType + tmpSVGGroup: Group ): DrawableElem[] { - const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGElem); + const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGroup); return orchestrator.getDrawableElement(); } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts index 75c0319bf3..8338d4f411 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts @@ -1,4 +1,3 @@ -import type { SVGGType } from '../xychartDb.js'; import type { ChartComponent, DrawableElem, @@ -12,6 +11,7 @@ import { getAxis } from './components/axis/index.js'; import { getChartTitleComponent } from './components/chartTitle.js'; import type { Plot } from './components/plot/index.js'; import { getPlotComponent } from './components/plot/index.js'; +import type { Group } from '../../../diagram-api/types.js'; export class Orchestrator { private componentStore: { @@ -24,10 +24,10 @@ export class Orchestrator { private chartConfig: XYChartConfig, private chartData: XYChartData, chartThemeConfig: XYChartThemeConfig, - tmpSVGGElem: SVGGType + tmpSVGGroup: Group ) { this.componentStore = { - title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGElem), + title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGroup), plot: getPlotComponent(chartConfig, chartData, chartThemeConfig), xAxis: getAxis( chartData.xAxis, @@ -38,7 +38,7 @@ export class Orchestrator { tickColor: chartThemeConfig.xAxisTickColor, axisLineColor: chartThemeConfig.xAxisLineColor, }, - tmpSVGGElem + tmpSVGGroup ), yAxis: getAxis( chartData.yAxis, @@ -49,7 +49,7 @@ export class Orchestrator { tickColor: chartThemeConfig.yAxisTickColor, axisLineColor: chartThemeConfig.yAxisLineColor, }, - tmpSVGGElem + tmpSVGGroup ), }; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts index e9e98c9e39..8049bf5272 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts @@ -1,13 +1,13 @@ import type { Dimension } from './interfaces.js'; import { computeDimensionOfText } from '../../../rendering-util/createText.js'; -import type { SVGGType } from '../xychartDb.js'; +import type { Group } from '../../../diagram-api/types.js'; export interface TextDimensionCalculator { getMaxDimension(texts: string[], fontSize: number): Dimension; } export class TextDimensionCalculatorWithFont implements TextDimensionCalculator { - constructor(private parentGroup: SVGGType) {} + constructor(private parentGroup: Group) {} getMaxDimension(texts: string[], fontSize: number): Dimension { if (!this.parentGroup) { return { @@ -28,8 +28,10 @@ export class TextDimensionCalculatorWithFont implements TextDimensionCalculator for (const t of texts) { const bbox = computeDimensionOfText(elem, 1, t); - dimension.width = Math.max(dimension.width, bbox.width); - dimension.height = Math.max(dimension.height, bbox.height); + const width = bbox ? bbox.width : t.length * fontSize; + const height = bbox ? bbox.height : fontSize; + dimension.width = Math.max(dimension.width, width); + dimension.height = Math.max(dimension.height, height); } elem.remove(); return dimension; diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 7271c04689..927a6aff56 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -1,4 +1,3 @@ -import type { Selection } from 'd3-selection'; import { clear as commonClear, getAccDescription, @@ -22,12 +21,11 @@ import type { XYChartThemeConfig, } from './chartBuilder/interfaces.js'; import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js'; - -export type SVGGType = Selection<SVGGElement, unknown, Element | null, unknown>; +import type { Group } from '../../diagram-api/types.js'; let plotIndex = 0; -let tmpSVGGElem: SVGGType; +let tmpSVGGroup: Group; let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); @@ -77,8 +75,8 @@ function textSanitizer(text: string) { return sanitizeText(text.trim(), config); } -function setTmpSVGG(SVGG: SVGGType) { - tmpSVGGElem = SVGG; +function setTmpSVGG(SVGG: Group) { + tmpSVGGroup = SVGG; } function setOrientation(oriantation: string) { if (oriantation === 'horizontal') { @@ -186,7 +184,7 @@ function getDrawableElem(): DrawableElem[] { throw Error('No Plot to render, please provide a plot with some data'); } xyChartData.title = getDiagramTitle(); - return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig, tmpSVGGElem); + return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig, tmpSVGGroup); } function getChartThemeConfig() { diff --git a/packages/mermaid/src/diagrams/xychart/xychartDetector.ts b/packages/mermaid/src/diagrams/xychart/xychartDetector.ts index d200adc591..fd3fefc0a4 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDetector.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDetector.ts @@ -1,12 +1,16 @@ -import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'xychart'; const detector: DiagramDetector = (txt) => { - return txt.match(/^\s*xychart/i) !== null; + return /^\s*xychart/i.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./xychartDiagram.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts index 864f7f34db..a15b921939 100644 --- a/packages/mermaid/src/rendering-util/createText.ts +++ b/packages/mermaid/src/rendering-util/createText.ts @@ -1,5 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ // @ts-nocheck TODO: Fix types +import type { Group } from '../diagram-api/types.js'; +import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js'; import { log } from '../logger.js'; import { decodeEntities } from '../mermaidAPI.js'; import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js'; @@ -76,12 +78,18 @@ function computeWidthOfText(parentNode: any, lineHeight: number, line: MarkdownL return textLength; } -export function computeDimensionOfText(parentNode: any, lineHeight: number, text: string) { - const testElement = parentNode.append('text'); - const testSpan = createTspan(testElement, 1, lineHeight); +export function computeDimensionOfText( + parentNode: Group, + lineHeight: number, + text: string +): DOMRect | undefined { + const testElement: D3TextElement = parentNode.append('text'); + const testSpan: D3TSpanElement = createTspan(testElement, 1, lineHeight); updateTextContentAndStyles(testSpan, [{ content: text, type: 'normal' }]); - const textDimension = testSpan.node().getBoundingClientRect(); - testElement.remove(); + const textDimension: DOMRect | undefined = testSpan.node()?.getBoundingClientRect(); + if (textDimension) { + testElement.remove(); + } return textDimension; } From 0239e49d92bf65f5d5e2da4f47eb9d6554b5bcdb Mon Sep 17 00:00:00 2001 From: 0xflotus <0xflotus@gmail.com> Date: Mon, 2 Oct 2023 11:16:51 +0200 Subject: [PATCH 044/126] docs: fixed typo --- packages/mermaid/src/docs/syntax/flowchart.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index d06e75c22b..9327bc4acc 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -293,7 +293,7 @@ flowchart TB A & B--> C & D ``` -If you describe the same diagram using the the basic syntax, it will take four lines. A +If you describe the same diagram using the basic syntax, it will take four lines. A word of warning, one could go overboard with this making the flowchart harder to read in markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little. This goes for expressive syntaxes as well. From 42f8990834757d9bf52f46d87714125746e779e0 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Mon, 2 Oct 2023 20:48:04 +0530 Subject: [PATCH 045/126] Changed requested by code review --- .../src/diagrams/xychart/xychartDetector.ts | 2 +- .../mermaid/src/schemas/config.schema.yaml | 24 +++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/xychartDetector.ts b/packages/mermaid/src/diagrams/xychart/xychartDetector.ts index fd3fefc0a4..08be05b01e 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDetector.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDetector.ts @@ -7,7 +7,7 @@ import type { const id = 'xychart'; const detector: DiagramDetector = (txt) => { - return /^\s*xychart/i.test(txt); + return /^\s*xychart-beta/.test(txt); }; const loader: DiagramLoader = async () => { diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 7ba3ae18b2..69cd86a685 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -1009,12 +1009,12 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) default: true labelFontSize: description: font size of the axis labels (tick text) - type: integer + type: number default: 14 minimum: 1 labelPadding: description: top and bottom space from axis label (tick text) - type: integer + type: number default: 5 minimum: 0 showTitle: @@ -1023,12 +1023,12 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) default: true titleFontSize: description: font size of the axis title - type: integer + type: number default: 16 minimum: 1 titlePadding: description: top and bottom space from axis title - type: integer + type: number default: 5 minimum: 0 showTick: @@ -1037,12 +1037,12 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) default: true tickLength: description: length of the axis tick lines - type: integer + type: number default: 5 minimum: 1 tickWidth: description: width of the axis tick lines - type: integer + type: number default: 2 minimum: 1 showAxisLine: @@ -1051,7 +1051,7 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) default: true axisLineWidth: description: Width of the axis line - type: integer + type: number default: 2 minimum: 1 @@ -1074,22 +1074,22 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) properties: width: description: width of the chart - type: integer + type: number default: 700 minimum: 1 height: description: height of the chart - type: integer + type: number default: 500 minimum: 1 titleFontSize: description: Font size of the chart title - type: integer + type: number default: 20 minimum: 1 titlePadding: description: Top and bottom space from the chart title - type: integer + type: number default: 10 minimum: 0 showTitle: @@ -1108,7 +1108,7 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) default: 'vertical' plotReservedSpacePercent: description: Minimum percent of space plots of the chart will take - type: integer + type: number default: 50 minimum: 30 From 7f9dfa17f3bf7c7aad95e8a0a00c4c29084a32b2 Mon Sep 17 00:00:00 2001 From: subhash-halder <subhash-halder@users.noreply.github.com> Date: Mon, 2 Oct 2023 15:27:16 +0000 Subject: [PATCH 046/126] Update docs --- docs/ecosystem/integrations-community.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index b03e5581c7..14cb805a29 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -39,6 +39,8 @@ Below are a list of community plugins and integrations created with Mermaid. - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf) - [LiveBook](https://livebook.dev) ✅ - [Atlassian Products](https://www.atlassian.com) + - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/) + - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/) - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview) - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview) - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview) @@ -47,7 +49,7 @@ Below are a list of community plugins and integrations created with Mermaid. - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro) - [redmine-mermaid](https://github.com/styz/redmine_mermaid) - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin) -- [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/) +- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid) - [mermerd](https://github.com/KarnerTh/mermerd) - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive) From 395ee5ef067d9faea102777c491cadadf0cc6b09 Mon Sep 17 00:00:00 2001 From: Guy Pursey <guypursey@gmail.com> Date: Tue, 3 Oct 2023 17:53:46 +0100 Subject: [PATCH 047/126] Update notes on orientation in GitGraph documentation Attempt to make the documentation around left-right and top-down orientation clearer than it currently is, addressing issue #4885. --- packages/mermaid/src/docs/syntax/gitgraph.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/mermaid/src/docs/syntax/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md index 87f43afdde..8ff4057364 100644 --- a/packages/mermaid/src/docs/syntax/gitgraph.md +++ b/packages/mermaid/src/docs/syntax/gitgraph.md @@ -513,18 +513,19 @@ Here, we have changed the default main branch name to `MetroLine1`. ## Orientation (v10.3.0+) -In Mermaid, the default orientation is Left to Right. The branches are lined vertically. +In Mermaid, the default orientation is for commits to run from **left to right** and for branches to be stacked on top of one another. + +You can set this explicitly with `LR:` after `gitGraph`. Usage example: ```mermaid-example - gitGraph + gitGraph LR: commit commit branch develop commit commit - commit checkout main commit commit @@ -533,9 +534,11 @@ Usage example: commit ``` -Sometimes we may want to change the orientation. Currently, Mermaid supports two orientations: **Left to Right**(default) and **Top to Bottom**. +Sometimes, we may want to change the orientation of the graph. -In order to change the orientation from top to bottom i.e. branches lined horizontally, you need to add `TB` along with `gitGraph`. +Mermaid also supports a **top to bottom** orientation. In this mode, the commits run from top to bottom of the graph and branches are arranged side-by-side. + +To orient the graph in this way, you need to add `TB:` after gitGraph. Usage example: @@ -546,7 +549,6 @@ Usage example: branch develop commit commit - commit checkout main commit commit From 80af0e7ec780d030b6445787339a3d961a937476 Mon Sep 17 00:00:00 2001 From: guypursey <guypursey@users.noreply.github.com> Date: Wed, 4 Oct 2023 14:43:00 +0000 Subject: [PATCH 048/126] Update docs --- docs/syntax/gitgraph.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md index f2609e31c5..c62e001198 100644 --- a/docs/syntax/gitgraph.md +++ b/docs/syntax/gitgraph.md @@ -827,18 +827,19 @@ Here, we have changed the default main branch name to `MetroLine1`. ## Orientation (v10.3.0+) -In Mermaid, the default orientation is Left to Right. The branches are lined vertically. +In Mermaid, the default orientation is for commits to run from **left to right** and for branches to be stacked on top of one another. + +You can set this explicitly with `LR:` after `gitGraph`. Usage example: ```mermaid-example - gitGraph + gitGraph LR: commit commit branch develop commit commit - commit checkout main commit commit @@ -848,13 +849,12 @@ Usage example: ``` ```mermaid - gitGraph + gitGraph LR: commit commit branch develop commit commit - commit checkout main commit commit @@ -863,9 +863,11 @@ Usage example: commit ``` -Sometimes we may want to change the orientation. Currently, Mermaid supports two orientations: **Left to Right**(default) and **Top to Bottom**. +Sometimes, we may want to change the orientation of the graph. + +Mermaid also supports a **top to bottom** orientation. In this mode, the commits run from top to bottom of the graph and branches are arranged side-by-side. -In order to change the orientation from top to bottom i.e. branches lined horizontally, you need to add `TB` along with `gitGraph`. +To orient the graph in this way, you need to add `TB:` after gitGraph. Usage example: @@ -876,7 +878,6 @@ Usage example: branch develop commit commit - commit checkout main commit commit @@ -892,7 +893,6 @@ Usage example: branch develop commit commit - commit checkout main commit commit From 97487acbc39daf2b1845e60949110c54f4605af9 Mon Sep 17 00:00:00 2001 From: Guy Pursey <guypursey@gmail.com> Date: Thu, 5 Oct 2023 12:13:12 +0100 Subject: [PATCH 049/126] Updated GitGraph doc amendment based on feedback in PR. --- docs/syntax/gitgraph.md | 16 +++++++++++----- packages/mermaid/src/docs/syntax/gitgraph.md | 16 +++++++++++----- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md index c62e001198..8d39ddbcbd 100644 --- a/docs/syntax/gitgraph.md +++ b/docs/syntax/gitgraph.md @@ -827,9 +827,15 @@ Here, we have changed the default main branch name to `MetroLine1`. ## Orientation (v10.3.0+) -In Mermaid, the default orientation is for commits to run from **left to right** and for branches to be stacked on top of one another. +Mermaid supports two graph orientations: **Left-to-Right** (default) and **Top-to-Bottom**. -You can set this explicitly with `LR:` after `gitGraph`. +You can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)) or `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) after `gitGraph`. + +### Left to Right (default, `LR:`) + +In Mermaid, the default orientation is for commits to run from left to right and for branches to be stacked on top of one another. + +However, you can set this explicitly with `LR:` after `gitGraph`. Usage example: @@ -863,11 +869,11 @@ Usage example: commit ``` -Sometimes, we may want to change the orientation of the graph. +### Top to Bottom (`TB:`) -Mermaid also supports a **top to bottom** orientation. In this mode, the commits run from top to bottom of the graph and branches are arranged side-by-side. +In `TB` (**Top-to-Bottom**) orientation, the commits run from top to bottom of the graph and branches are arranged side-by-side. -To orient the graph in this way, you need to add `TB:` after gitGraph. +To orient the graph this way, you need to add `TB:` after gitGraph. Usage example: diff --git a/packages/mermaid/src/docs/syntax/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md index 8ff4057364..5fa09cb225 100644 --- a/packages/mermaid/src/docs/syntax/gitgraph.md +++ b/packages/mermaid/src/docs/syntax/gitgraph.md @@ -513,9 +513,15 @@ Here, we have changed the default main branch name to `MetroLine1`. ## Orientation (v10.3.0+) -In Mermaid, the default orientation is for commits to run from **left to right** and for branches to be stacked on top of one another. +Mermaid supports two graph orientations: **Left-to-Right** (default) and **Top-to-Bottom**. -You can set this explicitly with `LR:` after `gitGraph`. +You can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)) or `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) after `gitGraph`. + +### Left to Right (default, `LR:`) + +In Mermaid, the default orientation is for commits to run from left to right and for branches to be stacked on top of one another. + +However, you can set this explicitly with `LR:` after `gitGraph`. Usage example: @@ -534,11 +540,11 @@ Usage example: commit ``` -Sometimes, we may want to change the orientation of the graph. +### Top to Bottom (`TB:`) -Mermaid also supports a **top to bottom** orientation. In this mode, the commits run from top to bottom of the graph and branches are arranged side-by-side. +In `TB` (**Top-to-Bottom**) orientation, the commits run from top to bottom of the graph and branches are arranged side-by-side. -To orient the graph in this way, you need to add `TB:` after gitGraph. +To orient the graph this way, you need to add `TB:` after gitGraph. Usage example: From 309bb50155962f8f65fcf32c0281da5fcc2a2634 Mon Sep 17 00:00:00 2001 From: Sanjeet Kumar <skc0845@gmail.com> Date: Sat, 7 Oct 2023 14:08:29 +0530 Subject: [PATCH 050/126] Update README.md update Twitter logo in README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e5b8738afe..04747385a2 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) -[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_) +[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_) <img src="./img/header.png" alt="" /> From 38e906edbea38cbeb2738aa481078ba1782ec07d Mon Sep 17 00:00:00 2001 From: Sanjeet Kumar <skc0845@gmail.com> Date: Sat, 7 Oct 2023 14:09:19 +0530 Subject: [PATCH 051/126] Update README.zh-CN.md updated twitter logo in README.zh-CN.md --- README.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.zh-CN.md b/README.zh-CN.md index da83494052..98975ea331 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -35,7 +35,7 @@ Mermaid [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) -[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_) +[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_) <img src="./img/header.png" alt="" /> From 30b3e6213f6a8780b604f5af63acfb8a28e87529 Mon Sep 17 00:00:00 2001 From: Marcel Ribeiro-Dantas <mribeirodantas@seqera.io> Date: Sat, 7 Oct 2023 22:16:11 -0300 Subject: [PATCH 052/126] fix(typos): Fix minor typos in the source code Signed-off-by: Marcel Ribeiro-Dantas <mribeirodantas@seqera.io> --- CHANGELOG.md | 14 +++++++------- cypress/integration/rendering/gitGraph.spec.js | 12 ++++++------ cypress/integration/rendering/timeline.spec.ts | 2 +- demos/c4context.html | 2 +- demos/flowchart.html | 2 +- demos/requirements.html | 2 +- demos/state.html | 4 ++-- docs/config/accessibility.md | 8 ++++---- docs/syntax/flowchart.md | 6 +++--- docs/syntax/quadrantChart.md | 2 +- docs/syntax/timeline.md | 2 +- .../mermaid/src/dagre-wrapper/mermaid-graphlib.js | 4 ++-- .../src/dagre-wrapper/mermaid-graphlib.spec.js | 2 +- packages/mermaid/src/diagrams/er/erRenderer.js | 6 +++--- .../src/diagrams/er/parser/erDiagram.spec.js | 2 +- .../src/diagrams/flowchart/elk/flowRenderer-elk.js | 2 +- .../src/diagrams/git/gitGraphParserV2.spec.js | 2 +- .../mermaid/src/diagrams/mindmap/mindmap.spec.js | 8 ++++---- .../mermaid/src/diagrams/sequence/sequenceDb.js | 2 +- .../src/diagrams/state/stateDiagram.spec.js | 6 +++--- .../diagrams/xychart/parser/xychart.jison.spec.ts | 4 ++-- packages/mermaid/src/diagrams/xychart/xychartDb.ts | 4 ++-- packages/mermaid/src/docs/config/accessibility.md | 4 ++-- packages/mermaid/src/docs/syntax/flowchart.md | 4 ++-- packages/mermaid/src/docs/syntax/quadrantChart.md | 2 +- packages/mermaid/src/docs/syntax/timeline.md | 2 +- packages/mermaid/src/mermaid.spec.ts | 2 +- packages/mermaid/src/schemas/config.schema.yaml | 2 +- packages/mermaid/src/themes/theme-base.js | 2 +- packages/mermaid/src/themes/theme-dark.js | 2 +- packages/mermaid/src/themes/theme-forest.js | 2 +- packages/mermaid/src/utils.spec.ts | 2 +- tests/webpack/src/index.js | 2 +- 33 files changed, 62 insertions(+), 62 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7552efa3b7..ede5e19ad6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -68,7 +68,7 @@ try { ### Init deprecated and InitThrowsErrors removed -The config passed to `init` was not being used eariler. +The config passed to `init` was not being used earlier. It will now be used. The `init` function is deprecated and will be removed in the next major release. init currently works as a wrapper to `initialize` and `run`. @@ -195,7 +195,7 @@ mermaid.run({ - "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647) - Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646) - How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639) -- The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638) +- The live editor can't show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638) - import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634) - Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633) - Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630) @@ -504,7 +504,7 @@ mermaid.run({ - Docs css: code hard to read [\#324](https://github.com/knsv/mermaid/issues/324) - About Markpad integration [\#323](https://github.com/knsv/mermaid/issues/323) -- How to link backwords in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321) +- How to link backwards in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321) - Help with editor [\#310](https://github.com/knsv/mermaid/issues/310) - +1 [\#293](https://github.com/knsv/mermaid/issues/293) - Basic chart does not render on Chome, but does in Firefox [\#290](https://github.com/knsv/mermaid/issues/290) @@ -619,7 +619,7 @@ mermaid.run({ - render to png from the cli does not display the marker-end arrow heads [\#181](https://github.com/knsv/mermaid/issues/181) - Links in sequence diagrams [\#159](https://github.com/knsv/mermaid/issues/159) - comment characters `%%` cause parse error [\#141](https://github.com/knsv/mermaid/issues/141) -- Add a reversed assymetric shape [\#124](https://github.com/knsv/mermaid/issues/124) +- Add a reversed asymmetric shape [\#124](https://github.com/knsv/mermaid/issues/124) - Add syntax for double headed arrows [\#123](https://github.com/knsv/mermaid/issues/123) - Support for font-awesome [\#49](https://github.com/knsv/mermaid/issues/49) @@ -659,7 +659,7 @@ mermaid.run({ - Auto linewrap for notes in sequence diagrams [\#178](https://github.com/knsv/mermaid/issues/178) - Execute code after initialize [\#176](https://github.com/knsv/mermaid/issues/176) - Autoscaling for all diagram types [\#175](https://github.com/knsv/mermaid/issues/175) -- Problem wit click event callback [\#174](https://github.com/knsv/mermaid/issues/174) +- Problem with click event callback [\#174](https://github.com/knsv/mermaid/issues/174) - How to escape characters? [\#170](https://github.com/knsv/mermaid/issues/170) - it can not work [\#167](https://github.com/knsv/mermaid/issues/167) - UML Class diagram [\#154](https://github.com/knsv/mermaid/issues/154) @@ -762,7 +762,7 @@ mermaid.run({ - subgraph background is black in rendered flowchart PNG via CLI [\#121](https://github.com/knsv/mermaid/issues/121) - Integrate editor at https://github.com/naseer/mermaid-webapp [\#110](https://github.com/knsv/mermaid/issues/110) - Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99) -- Assymetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82) +- Asymmetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82) - NoModificationAllowedError [\#23](https://github.com/knsv/mermaid/issues/23) - Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3) @@ -908,7 +908,7 @@ mermaid.run({ - Question marks don't render properly with /dist/mermaid.full.min.js [\#30](https://github.com/knsv/mermaid/issues/30) - Error with some characters [\#25](https://github.com/knsv/mermaid/issues/25) -- Provide parse function in browser widthout `require`? [\#21](https://github.com/knsv/mermaid/issues/21) +- Provide parse function in browser without `require`? [\#21](https://github.com/knsv/mermaid/issues/21) - Better label text support [\#18](https://github.com/knsv/mermaid/issues/18) - Cap-cased words break parser [\#8](https://github.com/knsv/mermaid/issues/8) diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index c01a557961..9f040a36f0 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -26,7 +26,7 @@ describe('Git Graph diagram', () => { `gitGraph commit id: "Normal Commit" commit id: "Reverse Commit" type: REVERSE - commit id: "Hightlight Commit" type: HIGHLIGHT + commit id: "Highlight Commit" type: HIGHLIGHT `, {} ); @@ -36,7 +36,7 @@ describe('Git Graph diagram', () => { `gitGraph commit id: "Normal Commit with tag" tag: "v1.0.0" commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1" - commit id: "Hightlight Commit" type: HIGHLIGHT tag: "8.8.4" + commit id: "Highlight Commit" type: HIGHLIGHT tag: "8.8.4" `, {} ); @@ -102,7 +102,7 @@ describe('Git Graph diagram', () => { {} ); }); - it('8: should render a simple gitgraph with more than 8 branchs & overriding variables', () => { + it('8: should render a simple gitgraph with more than 8 branches & overriding variables', () => { imgSnapshotTest( `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'gitBranchLabel0': '#ffffff', @@ -358,7 +358,7 @@ gitGraph `gitGraph TB: commit id: "Normal Commit" commit id: "Reverse Commit" type: REVERSE - commit id: "Hightlight Commit" type: HIGHLIGHT + commit id: "Highlight Commit" type: HIGHLIGHT `, {} ); @@ -368,7 +368,7 @@ gitGraph `gitGraph TB: commit id: "Normal Commit with tag" tag: "v1.0.0" commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1" - commit id: "Hightlight Commit" type: HIGHLIGHT tag: "8.8.4" + commit id: "Highlight Commit" type: HIGHLIGHT tag: "8.8.4" `, {} ); @@ -434,7 +434,7 @@ gitGraph {} ); }); - it('22: should render a simple gitgraph with more than 8 branchs & overriding variables | Vertical Branch', () => { + it('22: should render a simple gitgraph with more than 8 branches & overriding variables | Vertical Branch', () => { imgSnapshotTest( `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'gitBranchLabel0': '#ffffff', diff --git a/cypress/integration/rendering/timeline.spec.ts b/cypress/integration/rendering/timeline.spec.ts index 68da01d503..c748b54d3c 100644 --- a/cypress/integration/rendering/timeline.spec.ts +++ b/cypress/integration/rendering/timeline.spec.ts @@ -57,7 +57,7 @@ describe('Timeline diagram', () => { {} ); }); - it('5: should render a simple timeline with directive overriden colors', () => { + it('5: should render a simple timeline with directive overridden colors', () => { imgSnapshotTest( ` %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'cScale0': '#ff0000', diff --git a/demos/c4context.html b/demos/c4context.html index cf358b5501..f674054a2f 100644 --- a/demos/c4context.html +++ b/demos/c4context.html @@ -173,7 +173,7 @@ <h1>C4 context diagram demos</h1> Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.") } - Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){ + Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){ Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){ Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.") } diff --git a/demos/flowchart.html b/demos/flowchart.html index 8389510b28..d7032a663c 100644 --- a/demos/flowchart.html +++ b/demos/flowchart.html @@ -22,7 +22,7 @@ <h3>graph</h3> --- graph LR accTitle: This is a complicated flow - accDescr: This is the descriptoin for the complicated flow. + accDescr: This is the description for the complicated flow. sid-B3655226-6C29-4D00-B685-3D5C734DC7E1[" diff --git a/demos/requirements.html b/demos/requirements.html index 3ede080588..2510db8dd1 100644 --- a/demos/requirements.html +++ b/demos/requirements.html @@ -17,7 +17,7 @@ <h1>Requirement diagram demos</h1> <pre class="mermaid"> requirementDiagram - accTitle: Requirments demo in black and white + accTitle: Requirements demo in black and white accDescr: A series of requirement boxes showing relationships among them. Has meaningless task names requirement test_req { diff --git a/demos/state.html b/demos/state.html index a3fc042927..3b4c20a57e 100644 --- a/demos/state.html +++ b/demos/state.html @@ -183,7 +183,7 @@ <h2>This shows Composite states</h2> </pre> <hr /> - <h2>Compsite states can link to themselves</h2> + <h2>Composite states can link to themselves</h2> <pre class="mermaid"> stateDiagram-v2 state Active { @@ -199,7 +199,7 @@ <h2>transition labels can span multiple lines using "br" tags or \n</h2> stateDiagram-v2 [*] --> S1 S1 --> S2: This long line uses a br tag<br />to create multiple<br />lines. - S1 --> S3: This transition descripton uses \na newline character\nto create multiple\nlines. + S1 --> S3: This transition description uses \na newline character\nto create multiple\nlines. </pre> <hr /> diff --git a/docs/config/accessibility.md b/docs/config/accessibility.md index bf8b3e5915..836d6bcb23 100644 --- a/docs/config/accessibility.md +++ b/docs/config/accessibility.md @@ -97,7 +97,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam graph LR accTitle: Big Decisions accDescr: Bob's Burgers process for making big decisions - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` @@ -105,7 +105,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam graph LR accTitle: Big Decisions accDescr: Bob's Burgers process for making big decisions - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` @@ -137,7 +137,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr for making very, very big decisions. This is actually a very simple flow: identify the big decision and then make the big decision. } - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` @@ -149,7 +149,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr for making very, very big decisions. This is actually a very simple flow: identify the big decision and then make the big decision. } - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index acd7c2db5b..1bdce6aa63 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -764,7 +764,7 @@ flowchart LR end %% ^ These subgraphs are identical, except for the links to them: - %% Link *to* subgraph1: subgraph1 direction is mantained + %% Link *to* subgraph1: subgraph1 direction is maintained outside --> subgraph1 %% Link *within* subgraph2: %% subgraph2 inherits the direction of the top-level graph (LR) @@ -783,7 +783,7 @@ flowchart LR end %% ^ These subgraphs are identical, except for the links to them: - %% Link *to* subgraph1: subgraph1 direction is mantained + %% Link *to* subgraph1: subgraph1 direction is maintained outside --> subgraph1 %% Link *within* subgraph2: %% subgraph2 inherits the direction of the top-level graph (LR) @@ -1112,7 +1112,7 @@ flowchart TD B-->E(A fa:fa-camera-retro perhaps?) ``` -Mermaid is compatible with Font Awesome up to verion 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free). +Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free). ## Graph declarations with spaces between vertices and link and without semicolon diff --git a/docs/syntax/quadrantChart.md b/docs/syntax/quadrantChart.md index 39b57fd131..97bc94e36e 100644 --- a/docs/syntax/quadrantChart.md +++ b/docs/syntax/quadrantChart.md @@ -115,7 +115,7 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text> | quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 | | xAxisLabelPadding | Top and bottom padding of x-axis text | 5 | | xAxisLabelFontSize | X-axis texts font size | 16 | -| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will alway be rendered in bottom | 'top' | +| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom | 'top' | | yAxisLabelPadding | Left and Right padding of y-axis text | 5 | | yAxisLabelFontSize | Y-axis texts font size | 16 | | yAxisPosition | Position of y-axis (left , right) | 'left' | diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md index d42a2dc7c4..610ad98c7c 100644 --- a/docs/syntax/timeline.md +++ b/docs/syntax/timeline.md @@ -217,7 +217,7 @@ Note that there are no sections defined, and each time period and its correspond 2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme. -You will need to add this option either via mermaid.intialize function or directives. +You will need to add this option either via mermaid.initialize function or directives. ```javascript mermaid.initialize({ diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js index 1e376054dd..f42cc34633 100644 --- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js +++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js @@ -231,12 +231,12 @@ export const adjustClustersAndEdges = (graph, depth) => { if (children.length > 0) { log.debug('Cluster identified', id, descendants); edges.forEach((edge) => { - // log.debug('Edge, decendants: ', edge, decendants[id]); + // log.debug('Edge, descendants: ', edge, descendants[id]); // Check if any edge leaves the cluster (not the actual cluster, that's a link from the box) if (edge.v !== id && edge.w !== id) { // Any edge where either the one of the nodes is descending to the cluster but not the other - // if (decendants[id].indexOf(edge.v) < 0 && decendants[id].indexOf(edge.w) < 0) { + // if (descendants[id].indexOf(edge.v) < 0 && descendants[id].indexOf(edge.w) < 0) { const d1 = isDescendant(edge.v, id); const d2 = isDescendant(edge.w, id); diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js index 1444a82c48..d44e543911 100644 --- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js +++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js @@ -419,7 +419,7 @@ describe('extractDescendants', function () { return {}; }); }); - it('Simple case of one level decendants GLB9', function () { + it('Simple case of one level descendants GLB9', function () { /* subgraph A a diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js index 0c19d491b6..895847456b 100644 --- a/packages/mermaid/src/diagrams/er/erRenderer.js +++ b/packages/mermaid/src/diagrams/er/erRenderer.js @@ -202,7 +202,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { let attribStyle = 'attributeBoxOdd'; // We will flip the style on alternate rows to achieve a banded effect attributeNodes.forEach((attributeNode) => { - // Calculate the alignment y co-ordinate for the type/name of the attribute + // Calculate the alignment y coordinate for the type/name of the attribute const alignY = heightOffset + heightPadding + attributeNode.height / 2; // Position the type attribute @@ -579,8 +579,8 @@ export const draw = function (text, id, _version, diagObj) { // 2. Make sure they are all added to the graph // 3. Add all the edges (relationships) to the graph as well // 4. Let dagre do its magic to lay out the graph. This assigns: - // - the centre co-ordinates for each node, bearing in mind the dimensions and edge relationships - // - the path co-ordinates for each edge + // - the centre coordinates for each node, bearing in mind the dimensions and edge relationships + // - the path coordinates for each edge // But it has no impact on the svg child nodes - the diagram remains with every entity rooted at 0,0 // 5. Now assign a transform to each entity in the svg node so that it gets drawn in the correct place, as determined by // its centre point, which is obtained from the graph, and it's width and height diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js index 825af737a6..ba29ff04b9 100644 --- a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js +++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js @@ -92,7 +92,7 @@ describe('when parsing ER diagram it...', function () { }); }); - it('cannot contain % because it interfers with parsing comments', function () { + it('cannot contain % because it interferes with parsing comments', function () { expect(() => { erDiagram.parser.parse(`erDiagram\n "Blo%rf"\n`); const entities = erDb.getEntities(); diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index 737b492fb3..e613d2df20 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -561,7 +561,7 @@ export const addEdges = function (edges, diagObj, graph, svg) { }; // TODO: break out and share with dagre wrapper. The current code in dagre wrapper also adds -// adds the line to the graph, but we don't need that here. This is why we cant use the dagre +// adds the line to the graph, but we don't need that here. This is why we can't use the dagre // wrapper directly for this /** * Add the markers to the edge depending on the type of arrow is diff --git a/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js b/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js index df20a5eb5a..540ab773bf 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js +++ b/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js @@ -6,7 +6,7 @@ describe('when parsing a gitGraph', function () { parser.yy = gitGraphAst; parser.yy.clear(); }); - it('should handle a gitGraph commit with NO pararms, get auto-genrated reandom ID', function () { + it('should handle a gitGraph commit with NO pararms, get auto-generated reandom ID', function () { const str = `gitGraph: commit `; diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js index 845205f9b3..c0b72060d9 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js +++ b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js @@ -129,7 +129,7 @@ root expect(child.nodeId).toEqual('theId'); expect(child.type).toEqual(mindmap.yy.nodeType.ROUNDED_RECT); }); - it('MMP-10 mutiple types (circle)', function () { + it('MMP-10 multiple types (circle)', function () { let str = `mindmap root((the root)) `; @@ -141,7 +141,7 @@ root expect(mm.type).toEqual(mindmap.yy.nodeType.CIRCLE); }); - it('MMP-11 mutiple types (cloud)', function () { + it('MMP-11 multiple types (cloud)', function () { let str = `mindmap root)the root( `; @@ -152,7 +152,7 @@ root expect(mm.children.length).toEqual(0); expect(mm.type).toEqual(mindmap.yy.nodeType.CLOUD); }); - it('MMP-12 mutiple types (bang)', function () { + it('MMP-12 multiple types (bang)', function () { let str = `mindmap root))the root(( `; @@ -164,7 +164,7 @@ root expect(mm.type).toEqual(mindmap.yy.nodeType.BANG); }); - it('MMP-12-a mutiple types (hexagon)', function () { + it('MMP-12-a multiple types (hexagon)', function () { let str = `mindmap root{{the root}} `; diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js index 6c3f1f64df..7f893611d1 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js @@ -126,7 +126,7 @@ export const addSignal = function ( const cnt = activationCount(idFrom.actor); if (cnt < 1) { // Bail out as there is an activation signal from an inactive participant - let error = new Error('Trying to inactivate an inactive participant (' + idFrom.actor + ')'); + let error = new Error('Trying to deactivate an inactive participant (' + idFrom.actor + ')'); error.hash = { text: '->>-', token: '->>-', diff --git a/packages/mermaid/src/diagrams/state/stateDiagram.spec.js b/packages/mermaid/src/diagrams/state/stateDiagram.spec.js index 536031c815..7fcf4d0a6a 100644 --- a/packages/mermaid/src/diagrams/state/stateDiagram.spec.js +++ b/packages/mermaid/src/diagrams/state/stateDiagram.spec.js @@ -212,14 +212,14 @@ describe('state diagram, ', function () { parser.parse(str); }); - it('should handle state defintions with separation of id', function () { + it('should handle state definitions with separation of id', function () { const str = `stateDiagram\n state "Long state description" as state1 `; parser.parse(str); }); - it('should handle state defintions with separation of id', function () { + it('should handle state definitions with separation of id', function () { const str = `stateDiagram state "Not Shooting State" as NotShooting { state "Idle mode" as Idle @@ -360,7 +360,7 @@ describe('state diagram, ', function () { parser.parse(str); }); - it('should handle notes for composit states', function () { + it('should handle notes for composite states', function () { const str = `stateDiagram\n [*] --> NotShooting diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 23fdb8ae8b..d113250aa4 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -386,7 +386,7 @@ describe('Testing xychart jison file', () => { 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -4aa5 , 56.6 ] '; expect(parserFnConstructor(str)).toThrow(); }); - it('parse multiple bar and line varient 1', () => { + it('parse multiple bar and line variant 1', () => { const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle1 [23, 45, 56.6] \n line lineTitle1 [11, 45.5, 67, 23] \n bar barTitle2 [13, 42, 56.89] \n line lineTitle2 [45, 99, 012]'; expect(parserFnConstructor(str)).not.toThrow(); @@ -409,7 +409,7 @@ describe('Testing xychart jison file', () => { [45, 99, 12] ); }); - it('parse multiple bar and line varient 2', () => { + it('parse multiple bar and line variant 2', () => { const str = ` xychart-beta horizontal title Basic xychart diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 927a6aff56..637477f28b 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -78,8 +78,8 @@ function textSanitizer(text: string) { function setTmpSVGG(SVGG: Group) { tmpSVGGroup = SVGG; } -function setOrientation(oriantation: string) { - if (oriantation === 'horizontal') { +function setOrientation(orientation: string) { + if (orientation === 'horizontal') { xyChartConfig.chartOrientation = 'horizontal'; } else { xyChartConfig.chartOrientation = 'vertical'; diff --git a/packages/mermaid/src/docs/config/accessibility.md b/packages/mermaid/src/docs/config/accessibility.md index 67fb090b80..559c739874 100644 --- a/packages/mermaid/src/docs/config/accessibility.md +++ b/packages/mermaid/src/docs/config/accessibility.md @@ -91,7 +91,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam graph LR accTitle: Big Decisions accDescr: Bob's Burgers process for making big decisions - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` @@ -123,7 +123,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr for making very, very big decisions. This is actually a very simple flow: identify the big decision and then make the big decision. } - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index d06e75c22b..3620c159e5 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -487,7 +487,7 @@ flowchart LR end %% ^ These subgraphs are identical, except for the links to them: - %% Link *to* subgraph1: subgraph1 direction is mantained + %% Link *to* subgraph1: subgraph1 direction is maintained outside --> subgraph1 %% Link *within* subgraph2: %% subgraph2 inherits the direction of the top-level graph (LR) @@ -757,7 +757,7 @@ flowchart TD B-->E(A fa:fa-camera-retro perhaps?) ``` -Mermaid is compatible with Font Awesome up to verion 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free). +Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free). ## Graph declarations with spaces between vertices and link and without semicolon diff --git a/packages/mermaid/src/docs/syntax/quadrantChart.md b/packages/mermaid/src/docs/syntax/quadrantChart.md index 835bbfa32f..6e0494270b 100644 --- a/packages/mermaid/src/docs/syntax/quadrantChart.md +++ b/packages/mermaid/src/docs/syntax/quadrantChart.md @@ -96,7 +96,7 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text> | quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 | | xAxisLabelPadding | Top and bottom padding of x-axis text | 5 | | xAxisLabelFontSize | X-axis texts font size | 16 | -| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will alway be rendered in bottom | 'top' | +| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom | 'top' | | yAxisLabelPadding | Left and Right padding of y-axis text | 5 | | yAxisLabelFontSize | Y-axis texts font size | 16 | | yAxisPosition | Position of y-axis (left , right) | 'left' | diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md index 201ab6b16f..eeff9b1353 100644 --- a/packages/mermaid/src/docs/syntax/timeline.md +++ b/packages/mermaid/src/docs/syntax/timeline.md @@ -143,7 +143,7 @@ Note that there are no sections defined, and each time period and its correspond 2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme. -You will need to add this option either via mermaid.intialize function or directives. +You will need to add this option either via mermaid.initialize function or directives. ```javascript mermaid.initialize({ diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts index 645b5b39cb..9c3bd31baa 100644 --- a/packages/mermaid/src/mermaid.spec.ts +++ b/packages/mermaid/src/mermaid.spec.ts @@ -174,7 +174,7 @@ describe('when using mermaid and ', () => { await expect(mermaid.parse('graph TQ;A--x|text including URL space|B;')).rejects .toThrowErrorMatchingInlineSnapshot(` "Lexical error on line 1. Unrecognized text. - graph TQ;A--x|text includ + graph TQ;A--x|text include -----^" `); }); diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 69cd86a685..ee92b4875f 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -221,7 +221,7 @@ properties: type: number default: 16 -$defs: # JSON Schema definition (maybe we should move these to a seperate file) +$defs: # JSON Schema definition (maybe we should move these to a separate file) BaseDiagramConfig: # TODO: More config needs to be moved here title: Base Diagram Config diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js index 663af85016..d1a6eae2ab 100644 --- a/packages/mermaid/src/themes/theme-base.js +++ b/packages/mermaid/src/themes/theme-base.js @@ -165,7 +165,7 @@ class Theme { } } - // Setup teh label color for the set + // Setup the label color for the set this.scaleLabelColor = this.scaleLabelColor || this.labelTextColor; for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js index 300cf30366..c566251090 100644 --- a/packages/mermaid/src/themes/theme-dark.js +++ b/packages/mermaid/src/themes/theme-dark.js @@ -203,7 +203,7 @@ class Theme { this['surfacePeer' + i] || adjust(this.mainBkg, { h: 30, s: -30, l: -(-7 + i * 4) }); } - // Setup teh label color for the set + // Setup the label color for the set this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor); for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js index adf337a16c..0270f51ff9 100644 --- a/packages/mermaid/src/themes/theme-forest.js +++ b/packages/mermaid/src/themes/theme-forest.js @@ -128,7 +128,7 @@ class Theme { this['cScaleInv' + i] = this['cScaleInv' + i] || adjust(this['cScale' + i], { h: 180 }); } - // Setup teh label color for the set + // Setup the label color for the set this.scaleLabelColor = this.scaleLabelColor !== 'calculated' && this.scaleLabelColor ? this.scaleLabelColor diff --git a/packages/mermaid/src/utils.spec.ts b/packages/mermaid/src/utils.spec.ts index 3be3bc2141..8ccf5b2107 100644 --- a/packages/mermaid/src/utils.spec.ts +++ b/packages/mermaid/src/utils.spec.ts @@ -450,7 +450,7 @@ describe('when parsing font sizes', function () { expect(utils.parseFontSize(undefined)).toEqual([undefined, undefined]); }); - it('handles unparseable input', function () { + it('handles unparsable input', function () { // @ts-expect-error Explicitly testing unparsable input expect(utils.parseFontSize({ fontSize: 14 })).toEqual([undefined, undefined]); }); diff --git a/tests/webpack/src/index.js b/tests/webpack/src/index.js index 51738aa62c..e667cfc5d0 100644 --- a/tests/webpack/src/index.js +++ b/tests/webpack/src/index.js @@ -22,7 +22,7 @@ const load = async () => { Popularisation British popular psychology author Tony Buzan Research - On effectivness<br/>and features + On effectiveness<br/>and features On Automatic creation Uses Creative techniques From 846fb3f8f86bc516c41e08920720e3c7c697ad75 Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus <dev.blankenhaus@gmail.com> Date: Sat, 30 Sep 2023 16:10:59 +0200 Subject: [PATCH 053/126] making consitent config imports from diagramAPI --- .../mermaid/src/dagre-wrapper/clusters.js | 2 +- .../mermaid/src/dagre-wrapper/createLabel.js | 2 +- packages/mermaid/src/dagre-wrapper/edges.js | 2 +- packages/mermaid/src/dagre-wrapper/nodes.js | 2 +- .../mermaid/src/dagre-wrapper/shapes/note.js | 2 +- .../mermaid/src/dagre-wrapper/shapes/util.js | 2 +- .../mermaid/src/diagram-api/diagramAPI.ts | 10 +++++++- packages/mermaid/src/diagrams/c4/c4Db.js | 8 +++--- .../mermaid/src/diagrams/c4/c4Renderer.js | 6 ++--- .../mermaid/src/diagrams/class/classDb.ts | 20 ++++++--------- .../src/diagrams/class/classRenderer-v2.ts | 2 +- .../src/diagrams/class/classRenderer.js | 2 +- .../mermaid/src/diagrams/class/classTypes.ts | 2 +- .../mermaid/src/diagrams/common/commonDb.ts | 2 +- packages/mermaid/src/diagrams/er/erDb.js | 4 +-- .../mermaid/src/diagrams/er/erRenderer.js | 2 +- .../mermaid/src/diagrams/flowchart/flowDb.js | 10 ++++---- .../src/diagrams/flowchart/flowDiagram-v2.ts | 2 +- .../src/diagrams/flowchart/flowRenderer-v2.js | 2 +- .../src/diagrams/flowchart/flowRenderer.js | 2 +- .../diagrams/flowchart/flowRenderer.spec.js | 2 +- .../mermaid/src/diagrams/gantt/ganttDb.js | 8 +++--- .../src/diagrams/gantt/ganttRenderer.js | 2 +- .../mermaid/src/diagrams/git/gitGraphAst.js | 25 +++++++++---------- packages/mermaid/src/diagrams/git/layout.js | 2 +- .../mermaid/src/diagrams/mindmap/mindmapDb.js | 2 +- .../src/diagrams/mindmap/mindmapRenderer.js | 2 +- packages/mermaid/src/diagrams/pie/pie.spec.ts | 2 +- packages/mermaid/src/diagrams/pie/pieDb.ts | 2 +- .../mermaid/src/diagrams/pie/pieRenderer.ts | 2 +- .../src/diagrams/quadrant-chart/quadrantDb.ts | 6 ++--- .../quadrant-chart/quadrantRenderer.ts | 4 +-- .../src/diagrams/requirement/requirementDb.js | 4 +-- .../requirement/requirementRenderer.js | 2 +- .../mermaid/src/diagrams/sankey/sankeyDB.ts | 6 ++--- .../src/diagrams/sankey/sankeyRenderer.ts | 6 ++--- .../src/diagrams/sequence/sequenceDb.js | 14 +++++------ .../diagrams/sequence/sequenceDiagram.spec.js | 6 ++--- .../src/diagrams/sequence/sequenceRenderer.ts | 6 ++--- packages/mermaid/src/diagrams/state/shapes.js | 2 +- .../mermaid/src/diagrams/state/stateDb.js | 12 ++++----- .../src/diagrams/state/stateRenderer-v2.js | 2 +- .../src/diagrams/state/stateRenderer.js | 2 +- .../src/diagrams/timeline/timelineRenderer.ts | 2 +- .../src/diagrams/user-journey/journeyDb.js | 4 +-- .../diagrams/user-journey/journeyRenderer.ts | 2 +- .../src/rendering-util/selectSvgElement.ts | 2 +- 47 files changed, 109 insertions(+), 108 deletions(-) diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js index 1ce7166890..5c6e5a4e05 100644 --- a/packages/mermaid/src/dagre-wrapper/clusters.js +++ b/packages/mermaid/src/dagre-wrapper/clusters.js @@ -3,7 +3,7 @@ import { log } from '../logger.js'; import createLabel from './createLabel.js'; import { createText } from '../rendering-util/createText.js'; import { select } from 'd3'; -import { getConfig } from '../config.js'; +import { getConfig } from '../diagram-api/diagramAPI.js'; import { evaluate } from '../diagrams/common/common.js'; const rect = (parent, node) => { diff --git a/packages/mermaid/src/dagre-wrapper/createLabel.js b/packages/mermaid/src/dagre-wrapper/createLabel.js index a8351c812f..c120f2083c 100644 --- a/packages/mermaid/src/dagre-wrapper/createLabel.js +++ b/packages/mermaid/src/dagre-wrapper/createLabel.js @@ -1,6 +1,6 @@ import { select } from 'd3'; import { log } from '../logger.js'; -import { getConfig } from '../config.js'; +import { getConfig } from '../diagram-api/diagramAPI.js'; import { evaluate } from '../diagrams/common/common.js'; import { decodeEntities } from '../mermaidAPI.js'; diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js index 1b3e172c01..ced9a3bc2c 100644 --- a/packages/mermaid/src/dagre-wrapper/edges.js +++ b/packages/mermaid/src/dagre-wrapper/edges.js @@ -2,7 +2,7 @@ import { log } from '../logger.js'; import createLabel from './createLabel.js'; import { createText } from '../rendering-util/createText.js'; import { line, curveBasis, select } from 'd3'; -import { getConfig } from '../config.js'; +import { getConfig } from '../diagram-api/diagramAPI.js'; import utils from '../utils.js'; import { evaluate } from '../diagrams/common/common.js'; import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js'; diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js index 51ff9ef116..325322798c 100644 --- a/packages/mermaid/src/dagre-wrapper/nodes.js +++ b/packages/mermaid/src/dagre-wrapper/nodes.js @@ -1,7 +1,7 @@ import { select } from 'd3'; import { log } from '../logger.js'; import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util.js'; -import { getConfig } from '../config.js'; +import { getConfig } from '../diagram-api/diagramAPI.js'; import intersect from './intersect/index.js'; import createLabel from './createLabel.js'; import note from './shapes/note.js'; diff --git a/packages/mermaid/src/dagre-wrapper/shapes/note.js b/packages/mermaid/src/dagre-wrapper/shapes/note.js index 17661e1696..514457cf02 100644 --- a/packages/mermaid/src/dagre-wrapper/shapes/note.js +++ b/packages/mermaid/src/dagre-wrapper/shapes/note.js @@ -1,6 +1,6 @@ import { updateNodeBounds, labelHelper } from './util.js'; import { log } from '../../logger.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import intersect from '../intersect/index.js'; const note = async (parent, node) => { diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js index 95b82ddc07..fbcb5198fb 100644 --- a/packages/mermaid/src/dagre-wrapper/shapes/util.js +++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js @@ -1,6 +1,6 @@ import createLabel from '../createLabel.js'; import { createText } from '../../rendering-util/createText.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { decodeEntities } from '../../mermaidAPI.js'; import { select } from 'd3'; import { evaluate, sanitizeText } from '../../diagrams/common/common.js'; diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts index ea3c10159f..7ca9d58043 100644 --- a/packages/mermaid/src/diagram-api/diagramAPI.ts +++ b/packages/mermaid/src/diagram-api/diagramAPI.ts @@ -1,6 +1,11 @@ import { addDetector } from './detectType.js'; import { log as _log, setLogLevel as _setLogLevel } from '../logger.js'; -import { getConfig as _getConfig } from '../config.js'; +import { + getConfig as _getConfig, + setConfig as _setConfig, + defaultConfig as _defaultConfig, + setSiteConfig as _setSiteConfig, +} from '../config.js'; import { sanitizeText as _sanitizeText } from '../diagrams/common/common.js'; import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox.js'; import { addStylesForDiagram } from '../styles.js'; @@ -15,6 +20,9 @@ import * as _commonDb from '../diagrams/common/commonDb.js'; export const log = _log; export const setLogLevel = _setLogLevel; export const getConfig = _getConfig; +export const setConfig = _setConfig; +export const defaultConfig = _defaultConfig; +export const setSiteConfig = _setSiteConfig; export const sanitizeText = (text: string) => _sanitizeText(text, getConfig()); export const setupGraphViewbox = _setupGraphViewbox; export const getCommonDb = () => { diff --git a/packages/mermaid/src/diagrams/c4/c4Db.js b/packages/mermaid/src/diagrams/c4/c4Db.js index 71c1785853..3fc7e0afca 100644 --- a/packages/mermaid/src/diagrams/c4/c4Db.js +++ b/packages/mermaid/src/diagrams/c4/c4Db.js @@ -1,4 +1,4 @@ -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { sanitizeText } from '../common/common.js'; import { setAccTitle, @@ -33,7 +33,7 @@ export const getC4Type = function () { }; export const setC4Type = function (c4TypeParam) { - let sanitizedText = sanitizeText(c4TypeParam, configApi.getConfig()); + let sanitizedText = sanitizeText(c4TypeParam, getConfig()); c4Type = sanitizedText; }; @@ -783,7 +783,7 @@ export const PLACEMENT = { }; export const setTitle = function (txt) { - let sanitizedText = sanitizeText(txt, configApi.getConfig()); + let sanitizedText = sanitizeText(txt, getConfig()); title = sanitizedText; }; @@ -816,7 +816,7 @@ export default { getAccTitle, getAccDescription, setAccDescription, - getConfig: () => configApi.getConfig().c4, + getConfig: () => getConfig().c4, clear, LINETYPE, ARROWTYPE, diff --git a/packages/mermaid/src/diagrams/c4/c4Renderer.js b/packages/mermaid/src/diagrams/c4/c4Renderer.js index e60e58f21c..326d3060e8 100644 --- a/packages/mermaid/src/diagrams/c4/c4Renderer.js +++ b/packages/mermaid/src/diagrams/c4/c4Renderer.js @@ -4,7 +4,7 @@ import { log } from '../../logger.js'; import { parser } from './parser/c4Diagram.jison'; import common from '../common/common.js'; import c4Db from './c4Db.js'; -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import assignWithDepth from '../../assignWithDepth.js'; import { wrapLabel, calculateTextWidth, calculateTextHeight } from '../../utils.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; @@ -580,8 +580,8 @@ function drawInsideBoundary( * @param diagObj */ export const draw = function (_text, id, _version, diagObj) { - conf = configApi.getConfig().c4; - const securityLevel = configApi.getConfig().securityLevel; + conf = getConfig().c4; + const securityLevel = getConfig().securityLevel; // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts index 45ca1ed16c..268ab8ff2e 100644 --- a/packages/mermaid/src/diagrams/class/classDb.ts +++ b/packages/mermaid/src/diagrams/class/classDb.ts @@ -1,7 +1,7 @@ import type { Selection } from 'd3'; import { select } from 'd3'; import { log } from '../../logger.js'; -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import common from '../common/common.js'; import utils from '../../utils.js'; import { @@ -34,7 +34,7 @@ let namespaceCounter = 0; let functions: any[] = []; -const sanitizeText = (txt: string) => common.sanitizeText(txt, configApi.getConfig()); +const sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig()); const splitClassNameAndType = function (_id: string) { const id = common.sanitizeText(_id, configApi.getConfig()); @@ -139,15 +139,9 @@ export const addRelation = function (relation: ClassRelation) { relation.id1 = splitClassNameAndType(relation.id1).className; relation.id2 = splitClassNameAndType(relation.id2).className; - relation.relationTitle1 = common.sanitizeText( - relation.relationTitle1.trim(), - configApi.getConfig() - ); + relation.relationTitle1 = common.sanitizeText(relation.relationTitle1.trim(), getConfig()); - relation.relationTitle2 = common.sanitizeText( - relation.relationTitle2.trim(), - configApi.getConfig() - ); + relation.relationTitle2 = common.sanitizeText(relation.relationTitle2.trim(), getConfig()); relations.push(relation); }; @@ -267,7 +261,7 @@ export const getTooltip = function (id: string, namespace?: string) { * @param target - Target of the link, _blank by default as originally defined in the svgDraw.js file */ export const setLink = function (ids: string, linkStr: string, target: string) { - const config = configApi.getConfig(); + const config = getConfig(); ids.split(',').forEach(function (_id) { let id = _id; if (_id[0].match(/\d/)) { @@ -304,7 +298,7 @@ export const setClickEvent = function (ids: string, functionName: string, functi const setClickFunc = function (_domId: string, functionName: string, functionArgs: string) { const domId = common.sanitizeText(_domId, configApi.getConfig()); - const config = configApi.getConfig(); + const config = getConfig(); if (config.securityLevel !== 'loose') { return; } @@ -465,7 +459,7 @@ export default { getAccTitle, getAccDescription, setAccDescription, - getConfig: () => configApi.getConfig().class, + getConfig: () => getConfig().class, addClass, bindFunctions, clear, diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts index 5abfd769a2..25712153c4 100644 --- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts +++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts @@ -2,7 +2,7 @@ import { select, curveLinear } from 'd3'; import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { log } from '../../logger.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { render } from '../../dagre-wrapper/index.js'; import utils from '../../utils.js'; import { interpolateToCurve, getStylesFromArray } from '../../utils.js'; diff --git a/packages/mermaid/src/diagrams/class/classRenderer.js b/packages/mermaid/src/diagrams/class/classRenderer.js index 58def16c2a..8c2dab7fb8 100644 --- a/packages/mermaid/src/diagrams/class/classRenderer.js +++ b/packages/mermaid/src/diagrams/class/classRenderer.js @@ -4,7 +4,7 @@ import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { log } from '../../logger.js'; import svgDraw from './svgDraw.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; let idCache = {}; const padding = 20; diff --git a/packages/mermaid/src/diagrams/class/classTypes.ts b/packages/mermaid/src/diagrams/class/classTypes.ts index d372feebad..e288eefde8 100644 --- a/packages/mermaid/src/diagrams/class/classTypes.ts +++ b/packages/mermaid/src/diagrams/class/classTypes.ts @@ -1,4 +1,4 @@ -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { parseGenericTypes, sanitizeText } from '../common/common.js'; export interface ClassNode { diff --git a/packages/mermaid/src/diagrams/common/commonDb.ts b/packages/mermaid/src/diagrams/common/commonDb.ts index e4b9c3539f..cc5b226779 100644 --- a/packages/mermaid/src/diagrams/common/commonDb.ts +++ b/packages/mermaid/src/diagrams/common/commonDb.ts @@ -1,5 +1,5 @@ import { sanitizeText as _sanitizeText } from './common.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; let accTitle = ''; let diagramTitle = ''; diff --git a/packages/mermaid/src/diagrams/er/erDb.js b/packages/mermaid/src/diagrams/er/erDb.js index 9a397597ee..a58b9bbc1a 100644 --- a/packages/mermaid/src/diagrams/er/erDb.js +++ b/packages/mermaid/src/diagrams/er/erDb.js @@ -1,5 +1,5 @@ import { log } from '../../logger.js'; -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { setAccTitle, @@ -83,7 +83,7 @@ const clear = function () { export default { Cardinality, Identification, - getConfig: () => configApi.getConfig().er, + getConfig: () => getConfig().er, addEntity, addAttributes, getEntities, diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js index 0c19d491b6..8e0fc4d4d9 100644 --- a/packages/mermaid/src/diagrams/er/erRenderer.js +++ b/packages/mermaid/src/diagrams/er/erRenderer.js @@ -1,7 +1,7 @@ import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { line, curveBasis, select } from 'd3'; import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { log } from '../../logger.js'; import utils from '../../utils.js'; import erMarkers from './erMarkers.js'; diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index a87bf558de..510c40ce84 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -1,6 +1,6 @@ import { select } from 'd3'; import utils from '../../utils.js'; -import * as configApi from '../../config.js'; +import { getConfig, defaultConfig } from '../../diagram-api/diagramAPI.js'; import common from '../common/common.js'; import { log } from '../../logger.js'; import { @@ -15,7 +15,7 @@ import { const MERMAID_DOM_ID_PREFIX = 'flowchart-'; let vertexCounter = 0; -let config = configApi.getConfig(); +let config = getConfig(); let vertices = {}; let edges = []; let classes = {}; @@ -84,7 +84,7 @@ export const addVertex = function (_id, textObj, type, style, classes, dir, prop } vertexCounter++; if (textObj !== undefined) { - config = configApi.getConfig(); + config = getConfig(); txt = sanitizeText(textObj.text.trim()); vertices[id].labelType = textObj.type; // strip quotes if string starts and ends with a quote @@ -277,7 +277,7 @@ const setTooltip = function (ids, tooltip) { const setClickFun = function (id, functionName, functionArgs) { let domId = lookUpDomId(id); // if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id; - if (configApi.getConfig().securityLevel !== 'loose') { + if (getConfig().securityLevel !== 'loose') { return; } if (functionName === undefined) { @@ -766,7 +766,7 @@ export const lex = { firstGraph, }; export default { - defaultConfig: () => configApi.defaultConfig.flowchart, + defaultConfig: () => defaultConfig.flowchart, setAccTitle, getAccTitle, getAccDescription, diff --git a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts index c3de4b6854..368a98ccae 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts @@ -4,7 +4,7 @@ import flowDb from './flowDb.js'; import flowRendererV2 from './flowRenderer-v2.js'; import flowStyles from './styles.js'; import type { MermaidConfig } from '../../config.type.js'; -import { setConfig } from '../../config.js'; +import { setConfig } from '../../diagram-api/diagramAPI.js'; export const diagram = { parser: flowParser, diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js index 576ee6b34d..23d43da2b0 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js @@ -1,6 +1,6 @@ import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { select, curveLinear, selectAll } from 'd3'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import utils from '../../utils.js'; import { render } from '../../dagre-wrapper/index.js'; import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js'; diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js index 8394b41e88..142e455563 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js @@ -1,6 +1,6 @@ import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { select, curveLinear, selectAll } from 'd3'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { render as Render } from 'dagre-d3-es'; import { applyStyle } from 'dagre-d3-es/src/dagre-js/util.js'; import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js'; diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js index 0e9e8c0dea..5fb2307e53 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js @@ -1,5 +1,5 @@ import { addVertices, addEdges } from './flowRenderer.js'; -import { setConfig } from '../../config.js'; +import { setConfig } from '../../diagram-api/diagramAPI.js'; setConfig({ flowchart: { diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js index 775494e3df..1c73a13ea9 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttDb.js +++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js @@ -4,7 +4,7 @@ import dayjsIsoWeek from 'dayjs/plugin/isoWeek.js'; import dayjsCustomParseFormat from 'dayjs/plugin/customParseFormat.js'; import dayjsAdvancedFormat from 'dayjs/plugin/advancedFormat.js'; import { log } from '../../logger.js'; -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import utils from '../../utils.js'; import { @@ -603,7 +603,7 @@ const compileTasks = function () { */ export const setLink = function (ids, _linkStr) { let linkStr = _linkStr; - if (configApi.getConfig().securityLevel !== 'loose') { + if (getConfig().securityLevel !== 'loose') { linkStr = sanitizeUrl(_linkStr); } ids.split(',').forEach(function (id) { @@ -634,7 +634,7 @@ export const setClass = function (ids, className) { }; const setClickFun = function (id, functionName, functionArgs) { - if (configApi.getConfig().securityLevel !== 'loose') { + if (getConfig().securityLevel !== 'loose') { return; } if (functionName === undefined) { @@ -725,7 +725,7 @@ export const bindFunctions = function (element) { }; export default { - getConfig: () => configApi.getConfig().gantt, + getConfig: () => getConfig().gantt, clear, setDateFormat, getDateFormat, diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 55b5607a28..33dbaf9efd 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -25,7 +25,7 @@ import { timeMonth, } from 'd3'; import common from '../common/common.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; export const setConf = function () { diff --git a/packages/mermaid/src/diagrams/git/gitGraphAst.js b/packages/mermaid/src/diagrams/git/gitGraphAst.js index abad68b22b..f8cfba6f51 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphAst.js +++ b/packages/mermaid/src/diagrams/git/gitGraphAst.js @@ -1,7 +1,6 @@ import { log } from '../../logger.js'; import { random } from '../../utils.js'; -import * as configApi from '../../config.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import common from '../common/common.js'; import { setAccTitle, @@ -106,9 +105,9 @@ export const getOptions = function () { export const commit = function (msg, id, type, tag) { log.debug('Entering commit:', msg, id, type, tag); - id = common.sanitizeText(id, configApi.getConfig()); - msg = common.sanitizeText(msg, configApi.getConfig()); - tag = common.sanitizeText(tag, configApi.getConfig()); + id = common.sanitizeText(id, getConfig()); + msg = common.sanitizeText(msg, getConfig()); + tag = common.sanitizeText(tag, getConfig()); const commit = { id: id ? id : seq + '-' + getId(), message: msg, @@ -125,7 +124,7 @@ export const commit = function (msg, id, type, tag) { }; export const branch = function (name, order) { - name = common.sanitizeText(name, configApi.getConfig()); + name = common.sanitizeText(name, getConfig()); if (branches[name] === undefined) { branches[name] = head != null ? head.id : null; branchesConfig[name] = { name, order: order ? parseInt(order, 10) : null }; @@ -149,8 +148,8 @@ export const branch = function (name, order) { }; export const merge = function (otherBranch, custom_id, override_type, custom_tag) { - otherBranch = common.sanitizeText(otherBranch, configApi.getConfig()); - custom_id = common.sanitizeText(custom_id, configApi.getConfig()); + otherBranch = common.sanitizeText(otherBranch, getConfig()); + custom_id = common.sanitizeText(custom_id, getConfig()); const currentCommit = commits[branches[curBranch]]; const otherCommit = commits[branches[otherBranch]]; @@ -258,9 +257,9 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag export const cherryPick = function (sourceId, targetId, tag) { log.debug('Entering cherryPick:', sourceId, targetId, tag); - sourceId = common.sanitizeText(sourceId, configApi.getConfig()); - targetId = common.sanitizeText(targetId, configApi.getConfig()); - tag = common.sanitizeText(tag, configApi.getConfig()); + sourceId = common.sanitizeText(sourceId, getConfig()); + targetId = common.sanitizeText(targetId, getConfig()); + tag = common.sanitizeText(tag, getConfig()); if (!sourceId || commits[sourceId] === undefined) { let error = new Error( @@ -338,7 +337,7 @@ export const cherryPick = function (sourceId, targetId, tag) { } }; export const checkout = function (branch) { - branch = common.sanitizeText(branch, configApi.getConfig()); + branch = common.sanitizeText(branch, getConfig()); if (branches[branch] === undefined) { let error = new Error( 'Trying to checkout branch which is not yet created. (Help try using "branch ' + branch + '")' @@ -502,7 +501,7 @@ export const commitType = { }; export default { - getConfig: () => configApi.getConfig().gitGraph, + getConfig: () => getConfig().gitGraph, setDirection, setOptions, getOptions, diff --git a/packages/mermaid/src/diagrams/git/layout.js b/packages/mermaid/src/diagrams/git/layout.js index 0dbe577659..2a782a0798 100644 --- a/packages/mermaid/src/diagrams/git/layout.js +++ b/packages/mermaid/src/diagrams/git/layout.js @@ -1,4 +1,4 @@ -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; export default (dir, _branches) => { const config = getConfig().gitGraph; diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.js b/packages/mermaid/src/diagrams/mindmap/mindmapDb.js index 9413581d64..4206a4a260 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.js +++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.js @@ -1,4 +1,4 @@ -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { sanitizeText as _sanitizeText } from '../../diagrams/common/common.js'; import { log } from '../../logger.js'; diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js index 7e741657b9..3fe9e1d510 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js @@ -1,7 +1,7 @@ /** Created by knut on 14-12-11. */ import { select } from 'd3'; import { log } from '../../logger.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { setupGraphViewbox } from '../../setupGraphViewbox.js'; import svgDraw from './svgDraw.js'; import cytoscape from 'cytoscape/dist/cytoscape.umd.js'; diff --git a/packages/mermaid/src/diagrams/pie/pie.spec.ts b/packages/mermaid/src/diagrams/pie/pie.spec.ts index 564e12f0f1..47a9a95f55 100644 --- a/packages/mermaid/src/diagrams/pie/pie.spec.ts +++ b/packages/mermaid/src/diagrams/pie/pie.spec.ts @@ -1,7 +1,7 @@ // @ts-ignore: JISON doesn't support types import { parser } from './parser/pie.jison'; import { DEFAULT_PIE_DB, db } from './pieDb.js'; -import { setConfig } from '../../config.js'; +import { setConfig } from '../../diagram-api/diagramAPI.js'; setConfig({ securityLevel: 'strict', diff --git a/packages/mermaid/src/diagrams/pie/pieDb.ts b/packages/mermaid/src/diagrams/pie/pieDb.ts index ce82216dc5..e2eebea543 100644 --- a/packages/mermaid/src/diagrams/pie/pieDb.ts +++ b/packages/mermaid/src/diagrams/pie/pieDb.ts @@ -1,5 +1,5 @@ import { log } from '../../logger.js'; -import { getConfig as commonGetConfig } from '../../config.js'; +import { getConfig as commonGetConfig } from '../../diagram-api/diagramAPI.js'; import { sanitizeText } from '../common/common.js'; import { setAccTitle, diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.ts b/packages/mermaid/src/diagrams/pie/pieRenderer.ts index 80f4f0a5a4..5f6f653c31 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts @@ -3,7 +3,7 @@ import { scaleOrdinal, pie as d3pie, arc } from 'd3'; import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { cleanAndMerge, parseFontSize } from '../../utils.js'; import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; import type { D3Sections, PieDB, Sections } from './pieTypes.js'; diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts index 0dad6dfdd5..c3a79c911e 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts @@ -1,4 +1,4 @@ -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { sanitizeText } from '../common/common.js'; import { setAccTitle, @@ -11,7 +11,7 @@ import { } from '../common/commonDb.js'; import { QuadrantBuilder } from './quadrantBuilder.js'; -const config = configApi.getConfig(); +const config = getConfig(); function textSanitizer(text: string) { return sanitizeText(text.trim(), config); @@ -66,7 +66,7 @@ function setHeight(height: number) { } function getQuadrantData() { - const config = configApi.getConfig(); + const config = getConfig(); const { themeVariables, quadrantChart: quadrantChartConfig } = config; if (quadrantChartConfig) { quadrantBuilder.setConfig(quadrantChartConfig); diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts index 9dd309b533..d272dccd4a 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts @@ -1,6 +1,6 @@ // @ts-nocheck - don't check until handle it import { select } from 'd3'; -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import type { Diagram } from '../../Diagram.js'; @@ -27,7 +27,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram return `translate(${data.x}, ${data.y}) rotate(${data.rotation || 0})`; } - const conf = configApi.getConfig(); + const conf = getConfig(); log.debug('Rendering quadrant chart\n' + txt); diff --git a/packages/mermaid/src/diagrams/requirement/requirementDb.js b/packages/mermaid/src/diagrams/requirement/requirementDb.js index 325e95ee20..9357e2a660 100644 --- a/packages/mermaid/src/diagrams/requirement/requirementDb.js +++ b/packages/mermaid/src/diagrams/requirement/requirementDb.js @@ -1,4 +1,4 @@ -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { log } from '../../logger.js'; import { @@ -144,7 +144,7 @@ export default { VerifyType, Relationships, - getConfig: () => configApi.getConfig().req, + getConfig: () => getConfig().req, addRequirement, getRequirements, diff --git a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js index 49b7828651..2af2067ad8 100644 --- a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js +++ b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js @@ -5,7 +5,7 @@ import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import common from '../common/common.js'; import markers from './requirementMarkers.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; let conf = {}; let relCnt = 0; diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts index 8b3a22c5a0..d6fd90373c 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts @@ -1,4 +1,4 @@ -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import common from '../common/common.js'; import { setAccTitle, @@ -42,7 +42,7 @@ class SankeyNode { } const findOrCreateNode = (ID: string): SankeyNode => { - ID = common.sanitizeText(ID, configApi.getConfig()); + ID = common.sanitizeText(ID, getConfig()); if (!nodesMap[ID]) { nodesMap[ID] = new SankeyNode(ID); @@ -65,7 +65,7 @@ const getGraph = () => ({ export default { nodesMap, - getConfig: () => configApi.getConfig().sankey, + getConfig: () => getConfig().sankey, getNodes, getLinks, getGraph, diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index 9f5b3c1720..0179e715b7 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -1,5 +1,5 @@ import type { Diagram } from '../../Diagram.js'; -import * as configApi from '../../config.js'; +import { getConfig, defaultConfig } from '../../diagram-api/diagramAPI.js'; import { select as d3select, @@ -41,8 +41,8 @@ const alignmentsMap: Record< */ export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void { // Get Sankey config - const { securityLevel, sankey: conf } = configApi.getConfig(); - const defaultSankeyConfig = configApi!.defaultConfig!.sankey!; + const { securityLevel, sankey: conf } = getConfig(); + const defaultSankeyConfig = defaultConfig!.sankey!; // TODO: // This code repeats for every diagram diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js index 6c3f1f64df..717cc8c09e 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js @@ -1,4 +1,4 @@ -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { log } from '../../logger.js'; import { sanitizeText } from '../common/common.js'; import { @@ -196,7 +196,7 @@ export const autoWrap = () => { if (wrapEnabled !== undefined) { return wrapEnabled; } - return configApi.getConfig().sequence.wrap; + return getConfig().sequence.wrap; }; export const clear = function () { @@ -251,7 +251,7 @@ export const parseBoxData = function (str) { color: color, text: title !== undefined - ? sanitizeText(title.replace(/^:?(?:no)?wrap:/, ''), configApi.getConfig()) + ? sanitizeText(title.replace(/^:?(?:no)?wrap:/, ''), getConfig()) : undefined, wrap: title !== undefined @@ -337,7 +337,7 @@ export const addLinks = function (actorId, text) { const actor = getActor(actorId); // JSON.parse the text try { - let sanitizedText = sanitizeText(text.text, configApi.getConfig()); + let sanitizedText = sanitizeText(text.text, getConfig()); sanitizedText = sanitizedText.replace(/&/g, '&'); sanitizedText = sanitizedText.replace(/=/g, '='); const links = JSON.parse(sanitizedText); @@ -353,7 +353,7 @@ export const addALink = function (actorId, text) { const actor = getActor(actorId); try { const links = {}; - let sanitizedText = sanitizeText(text.text, configApi.getConfig()); + let sanitizedText = sanitizeText(text.text, getConfig()); var sep = sanitizedText.indexOf('@'); sanitizedText = sanitizedText.replace(/&/g, '&'); sanitizedText = sanitizedText.replace(/=/g, '='); @@ -387,7 +387,7 @@ export const addProperties = function (actorId, text) { const actor = getActor(actorId); // JSON.parse the text try { - let sanitizedText = sanitizeText(text.text, configApi.getConfig()); + let sanitizedText = sanitizeText(text.text, getConfig()); const properties = JSON.parse(sanitizedText); // add the deserialized text to the actor's property field. insertProperties(actor, properties); @@ -629,7 +629,7 @@ export default { getBoxes, getDiagramTitle, setDiagramTitle, - getConfig: () => configApi.getConfig().sequence, + getConfig: () => getConfig().sequence, clear, parseMessage, parseBoxData, diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js index 77ac7c45cd..8a7e2281cb 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js @@ -1,5 +1,5 @@ import { vi } from 'vitest'; -import * as configApi from '../../config.js'; +import { setSiteConfig } from '../../diagram-api/diagramAPI.js'; import mermaidAPI from '../../mermaidAPI.js'; import { Diagram, getDiagramFromText } from '../../Diagram.js'; import { addDiagrams } from '../../diagram-api/diagram-orchestration.js'; @@ -1610,7 +1610,7 @@ describe('when rendering a sequenceDiagram APA', function () { wrap: false, mirrorActors: false, }; - configApi.setSiteConfig({ logLevel: 5, sequence: conf }); + setSiteConfig({ logLevel: 5, sequence: conf }); }); let conf; beforeEach(function () { @@ -1631,7 +1631,7 @@ describe('when rendering a sequenceDiagram APA', function () { wrap: false, mirrorActors: false, }; - configApi.setSiteConfig({ logLevel: 5, sequence: conf }); + setSiteConfig({ logLevel: 5, sequence: conf }); diagram = new Diagram(` sequenceDiagram Alice->Bob:Hello Bob, how are you? diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts index a41c3877fe..b8962395ee 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts +++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts @@ -4,7 +4,7 @@ import svgDraw, { ACTOR_TYPE_WIDTH, drawText, fixLifeLineHeights } from './svgDr import { log } from '../../logger.js'; import common from '../common/common.js'; import * as svgDrawCommon from '../common/svgDrawCommon.js'; -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import assignWithDepth from '../../assignWithDepth.js'; import utils from '../../utils.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; @@ -91,7 +91,7 @@ export const bounds = { stopy: undefined, }; this.verticalPos = 0; - setConf(configApi.getConfig()); + setConf(getConfig()); }, updateVal: function (obj, key, val, fun) { if (obj[key] === undefined) { @@ -747,7 +747,7 @@ function adjustCreatedDestroyedData( * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram */ export const draw = function (_text: string, id: string, _version: string, diagObj: Diagram) { - const { securityLevel, sequence } = configApi.getConfig(); + const { securityLevel, sequence } = getConfig(); conf = sequence; // Handle root and Document for when rendering in sandbox mode let sandboxElement; diff --git a/packages/mermaid/src/diagrams/state/shapes.js b/packages/mermaid/src/diagrams/state/shapes.js index e82a1ad61a..b8cfe5bda1 100644 --- a/packages/mermaid/src/diagrams/state/shapes.js +++ b/packages/mermaid/src/diagrams/state/shapes.js @@ -3,7 +3,7 @@ import idCache from './id-cache.js'; import stateDb from './stateDb.js'; import utils from '../../utils.js'; import common from '../common/common.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { log } from '../../logger.js'; /** diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js index 0253c5bcf0..7e5e72fe09 100644 --- a/packages/mermaid/src/diagrams/state/stateDb.js +++ b/packages/mermaid/src/diagrams/state/stateDb.js @@ -1,7 +1,7 @@ import { log } from '../../logger.js'; import { generateId } from '../../utils.js'; import common from '../common/common.js'; -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { setAccTitle, getAccTitle, @@ -253,7 +253,7 @@ export const addState = function ( currentDocument.states[trimmedId].note = note; currentDocument.states[trimmedId].note.text = common.sanitizeText( currentDocument.states[trimmedId].note.text, - configApi.getConfig() + getConfig() ); } @@ -398,7 +398,7 @@ export function addRelationObjs(item1, item2, relationTitle) { currentDocument.relations.push({ id1, id2, - relationTitle: common.sanitizeText(relationTitle, configApi.getConfig()), + relationTitle: common.sanitizeText(relationTitle, getConfig()), }); } @@ -423,7 +423,7 @@ export const addRelation = function (item1, item2, title) { currentDocument.relations.push({ id1, id2, - title: common.sanitizeText(title, configApi.getConfig()), + title: common.sanitizeText(title, getConfig()), }); } }; @@ -431,7 +431,7 @@ export const addRelation = function (item1, item2, title) { export const addDescription = function (id, descr) { const theState = currentDocument.states[id]; const _descr = descr.startsWith(':') ? descr.replace(':', '').trim() : descr; - theState.descriptions.push(common.sanitizeText(_descr, configApi.getConfig())); + theState.descriptions.push(common.sanitizeText(_descr, getConfig())); }; export const cleanupLabel = function (label) { @@ -542,7 +542,7 @@ const setDirection = (dir) => { const trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.trim()); export default { - getConfig: () => configApi.getConfig().state, + getConfig: () => getConfig().state, addState, clear, getState, diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js index 0d3117b206..482e37caee 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js +++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js @@ -1,6 +1,6 @@ import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { select } from 'd3'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { render } from '../../dagre-wrapper/index.js'; import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js index 1b3e0f27ed..17b674cb5f 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer.js +++ b/packages/mermaid/src/diagrams/state/stateRenderer.js @@ -4,7 +4,7 @@ import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { log } from '../../logger.js'; import common from '../common/common.js'; import { drawState, addTitleAndBox, drawEdge } from './shapes.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; // TODO Move conf object to main conf in mermaidAPI diff --git a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts index ee351d905b..2f1f156899 100644 --- a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts +++ b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts @@ -3,7 +3,7 @@ import type { Selection } from 'd3'; import { select } from 'd3'; import svgDraw from './svgDraw.js'; import { log } from '../../logger.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { setupGraphViewbox } from '../../setupGraphViewbox.js'; import type { Diagram } from '../../Diagram.js'; import type { MermaidConfig } from '../../config.type.js'; diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDb.js b/packages/mermaid/src/diagrams/user-journey/journeyDb.js index 4d71c2e9dc..a2b95b899a 100644 --- a/packages/mermaid/src/diagrams/user-journey/journeyDb.js +++ b/packages/mermaid/src/diagrams/user-journey/journeyDb.js @@ -1,4 +1,4 @@ -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { setAccTitle, getAccTitle, @@ -113,7 +113,7 @@ const getActors = function () { }; export default { - getConfig: () => configApi.getConfig().journey, + getConfig: () => getConfig().journey, clear, setDiagramTitle, getDiagramTitle, diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts index 28c83f19d7..13eb31a024 100644 --- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts +++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts @@ -1,7 +1,7 @@ // @ts-nocheck TODO: fix file import { select } from 'd3'; import svgDraw from './svgDraw.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; export const setConf = function (cnf) { diff --git a/packages/mermaid/src/rendering-util/selectSvgElement.ts b/packages/mermaid/src/rendering-util/selectSvgElement.ts index ae106ef78d..cc1d021fdd 100644 --- a/packages/mermaid/src/rendering-util/selectSvgElement.ts +++ b/packages/mermaid/src/rendering-util/selectSvgElement.ts @@ -1,5 +1,5 @@ import { select } from 'd3'; -import { getConfig } from '../config.js'; +import { getConfig } from '../diagram-api/diagramAPI.js'; import type { HTML, SVG } from '../diagram-api/types.js'; /** From 01203d884cfabf8fb7082cec672909f6a7adebb1 Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus <dev.blankenhaus@gmail.com> Date: Sun, 8 Oct 2023 15:32:40 +0200 Subject: [PATCH 054/126] fix classDB --- packages/mermaid/src/diagrams/class/classDb.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts index 268ab8ff2e..312dda7a69 100644 --- a/packages/mermaid/src/diagrams/class/classDb.ts +++ b/packages/mermaid/src/diagrams/class/classDb.ts @@ -37,7 +37,7 @@ let functions: any[] = []; const sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig()); const splitClassNameAndType = function (_id: string) { - const id = common.sanitizeText(_id, configApi.getConfig()); + const id = common.sanitizeText(_id, getConfig()); let genericType = ''; let className = id; @@ -51,7 +51,7 @@ const splitClassNameAndType = function (_id: string) { }; export const setClassLabel = function (_id: string, label: string) { - const id = common.sanitizeText(_id, configApi.getConfig()); + const id = common.sanitizeText(_id, getConfig()); if (label) { label = sanitizeText(label); } @@ -67,14 +67,14 @@ export const setClassLabel = function (_id: string, label: string) { * @public */ export const addClass = function (_id: string) { - const id = common.sanitizeText(_id, configApi.getConfig()); + const id = common.sanitizeText(_id, getConfig()); const { className, type } = splitClassNameAndType(id); // Only add class if not exists if (Object.hasOwn(classes, className)) { return; } // alert('Adding class: ' + className); - const name = common.sanitizeText(className, configApi.getConfig()); + const name = common.sanitizeText(className, getConfig()); // alert('Adding class after: ' + name); classes[name] = { id: name, @@ -97,7 +97,7 @@ export const addClass = function (_id: string) { * @public */ export const lookUpDomId = function (_id: string): string { - const id = common.sanitizeText(_id, configApi.getConfig()); + const id = common.sanitizeText(_id, getConfig()); if (id in classes) { return classes[id].domId; } @@ -297,7 +297,7 @@ export const setClickEvent = function (ids: string, functionName: string, functi }; const setClickFunc = function (_domId: string, functionName: string, functionArgs: string) { - const domId = common.sanitizeText(_domId, configApi.getConfig()); + const domId = common.sanitizeText(_domId, getConfig()); const config = getConfig(); if (config.securityLevel !== 'loose') { return; From 497ffde9fef294a9199e0dcec0e281c6ec1b516e Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus <dev.blankenhaus@gmail.com> Date: Sun, 8 Oct 2023 18:22:27 +0200 Subject: [PATCH 055/126] undo changes for commonDb to avoid circular imports --- packages/mermaid/src/diagrams/common/commonDb.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/common/commonDb.ts b/packages/mermaid/src/diagrams/common/commonDb.ts index cc5b226779..e4b9c3539f 100644 --- a/packages/mermaid/src/diagrams/common/commonDb.ts +++ b/packages/mermaid/src/diagrams/common/commonDb.ts @@ -1,5 +1,5 @@ import { sanitizeText as _sanitizeText } from './common.js'; -import { getConfig } from '../../diagram-api/diagramAPI.js'; +import { getConfig } from '../../config.js'; let accTitle = ''; let diagramTitle = ''; From 4559ba625c8041e149da0215fcb5dc0bf97330d9 Mon Sep 17 00:00:00 2001 From: Jakub Mikulas <jakub.mikulas@code-intelligence.com> Date: Tue, 3 Oct 2023 15:34:31 +0200 Subject: [PATCH 056/126] docs(integrations): add Mermaid for Slack --- docs/ecosystem/integrations-community.md | 2 ++ packages/mermaid/src/docs/ecosystem/integrations-community.md | 2 ++ 2 files changed, 4 insertions(+) diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index 2c67cc3618..db1649ff69 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -99,6 +99,8 @@ Communication tools and platforms - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid) - [NodeBB](https://nodebb.org) - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid) +- [Slack](https://slack.com) + - [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack) ### Wikis diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md index 3a3a20de8f..556f644303 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations-community.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md @@ -97,6 +97,8 @@ Communication tools and platforms - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid) - [NodeBB](https://nodebb.org) - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid) +- [Slack](https://slack.com) + - [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack) ### Wikis From 444e81ae8a01d4a718142aa2413892c1455ed190 Mon Sep 17 00:00:00 2001 From: "Mr.Hope" <mister-hope@outlook.com> Date: Mon, 9 Oct 2023 11:08:46 +0800 Subject: [PATCH 057/126] fix(class): avoid duplicate definition of fill --- packages/mermaid/src/diagrams/class/styles.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/styles.js b/packages/mermaid/src/diagrams/class/styles.js index f12f609f91..5f99a8b913 100644 --- a/packages/mermaid/src/diagrams/class/styles.js +++ b/packages/mermaid/src/diagrams/class/styles.js @@ -1,7 +1,6 @@ const getStyles = (options) => `g.classGroup text { - fill: ${options.nodeBorder}; - fill: ${options.classText}; + fill: ${options.nodeBorder || options.classText}; stroke: none; font-family: ${options.fontFamily}; font-size: 10px; From 1fec55d5f7939ed6bc89c2d08dc15cf0015869cf Mon Sep 17 00:00:00 2001 From: "Mr.Hope" <mister-hope@outlook.com> Date: Mon, 9 Oct 2023 11:25:09 +0800 Subject: [PATCH 058/126] feat(gantt): update styles --- packages/mermaid/src/diagrams/gantt/styles.js | 41 ++++++++----------- 1 file changed, 16 insertions(+), 25 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js index 8193130bbc..626ed4e0f1 100644 --- a/packages/mermaid/src/diagrams/gantt/styles.js +++ b/packages/mermaid/src/diagrams/gantt/styles.js @@ -1,9 +1,9 @@ const getStyles = (options) => ` .mermaid-main-font { - font-family: "trebuchet ms", verdana, arial, sans-serif; - font-family: var(--mermaid-font-family); + font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); } + .exclude-range { fill: ${options.excludeBkgColor}; } @@ -45,11 +45,7 @@ const getStyles = (options) => .sectionTitle { text-anchor: start; - // font-size: ${options.ganttFontSize}; - // text-height: 14px; - font-family: 'trebuchet ms', verdana, arial, sans-serif; - font-family: var(--mermaid-font-family); - + font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); } @@ -59,10 +55,11 @@ const getStyles = (options) => stroke: ${options.gridColor}; opacity: 0.8; shape-rendering: crispEdges; - text { - font-family: ${options.fontFamily}; - fill: ${options.textColor}; - } + } + + .grid .tick text { + font-family: ${options.fontFamily}; + fill: ${options.textColor}; } .grid path { @@ -89,33 +86,27 @@ const getStyles = (options) => .taskText { text-anchor: middle; - font-family: 'trebuchet ms', verdana, arial, sans-serif; - font-family: var(--mermaid-font-family); + font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); } - // .taskText:not([font-size]) { - // font-size: ${options.ganttFontSize}; - // } - .taskTextOutsideRight { fill: ${options.taskTextDarkColor}; text-anchor: start; - // font-size: ${options.ganttFontSize}; - font-family: 'trebuchet ms', verdana, arial, sans-serif; - font-family: var(--mermaid-font-family); - + font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); } .taskTextOutsideLeft { fill: ${options.taskTextDarkColor}; text-anchor: end; - // font-size: ${options.ganttFontSize}; } + /* Special case clickable */ + .task.clickable { cursor: pointer; } + .taskText.clickable { cursor: pointer; fill: ${options.taskTextClickableColor} !important; @@ -134,6 +125,7 @@ const getStyles = (options) => font-weight: bold; } + /* Specific task settings for the sections*/ .taskText0, @@ -255,9 +247,8 @@ const getStyles = (options) => .titleText { text-anchor: middle; font-size: 18px; - fill: ${options.textColor} ; - font-family: 'trebuchet ms', verdana, arial, sans-serif; - font-family: var(--mermaid-font-family); + fill: ${options.titleColor || options.textColor}; + font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); } `; From 2a9eb7f1238819d92ba3bd336a1916cbabc819b4 Mon Sep 17 00:00:00 2001 From: Harshit Anand <harshitanand283@gmail.com> Date: Mon, 9 Oct 2023 21:13:53 +0530 Subject: [PATCH 059/126] fix: target blank removed from anchor tag --- packages/mermaid/src/diagrams/common/common.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts index e0ca2929db..25c6250a9c 100644 --- a/packages/mermaid/src/diagrams/common/common.ts +++ b/packages/mermaid/src/diagrams/common/common.ts @@ -28,6 +28,21 @@ export const removeScript = (txt: string): string => { return DOMPurify.sanitize(txt); }; +DOMPurify.addHook('afterSanitizeAttributes', function (node) { + // set all elements owning target to target=_blank + if ('target' in node) { + node.setAttribute('target', '_blank'); + node.setAttribute('rel', 'noopener noreferrer'); + } + // set non-HTML/MathML links to xlink:show=new + if ( + !node.hasAttribute('target') && + (node.hasAttribute('xlink:href') || node.hasAttribute('href')) + ) { + node.setAttribute('xlink:show', 'new'); + } +}); + const sanitizeMore = (text: string, config: MermaidConfig) => { if (config.flowchart?.htmlLabels !== false) { const level = config.securityLevel; From cdb4639aa401959baa3c0af0c3ba71996d868144 Mon Sep 17 00:00:00 2001 From: RounakJoshi09 <rounakjsh783@gmail.com> Date: Tue, 10 Oct 2023 00:16:05 +0530 Subject: [PATCH 060/126] bug/#3251_linkStyle-can't-specify-ids Fixed --- packages/mermaid/src/diagrams/flowchart/flowDb.js | 6 ++++++ .../src/diagrams/flowchart/parser/flow-style.spec.js | 8 ++++++++ 2 files changed, 14 insertions(+) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index a87bf558de..9c9442ce27 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -192,6 +192,12 @@ export const updateLinkInterpolate = function (positions, interp) { */ export const updateLink = function (positions, style) { positions.forEach(function (pos) { + if (pos >= edges.length) { + let error = new Error( + `Incorrect index ${pos} of linkStyle. (Help: Index must be from 0 to ${edges.length - 1})` + ); + throw error; + } if (pos === 'default') { edges.defaultStyle = style; } else { diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js index 1ab7543085..eb56c24f39 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js @@ -286,6 +286,14 @@ describe('[Style] when parsing', () => { expect(edges[0].type).toBe('arrow_point'); }); + it('should handle style definitions within number of edges', function () { + const res = flow.parser.parse('graph TD\n' + 'A-->B\n' + 'linkStyle 0 stroke-width:1px;'); + + const edges = flow.parser.yy.getEdges(); + + expect(edges[0].style[0]).toBe('stroke-width:1px'); + }); + it('should handle multi-numbered style definitions with more then 1 digit in a row', function () { const res = flow.parser.parse( 'graph TD\n' + From c279a9f9ed10ca7f0da62f2287363d69d92aa012 Mon Sep 17 00:00:00 2001 From: Harshit Anand <harshitanand283@gmail.com> Date: Tue, 10 Oct 2023 01:05:55 +0530 Subject: [PATCH 061/126] fix: clean link unit test resolved --- packages/mermaid/src/diagrams/common/common.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts index 25c6250a9c..e9d5ca42d3 100644 --- a/packages/mermaid/src/diagrams/common/common.ts +++ b/packages/mermaid/src/diagrams/common/common.ts @@ -30,7 +30,7 @@ export const removeScript = (txt: string): string => { DOMPurify.addHook('afterSanitizeAttributes', function (node) { // set all elements owning target to target=_blank - if ('target' in node) { + if (node.tagName === 'A' && node.hasAttribute('href') && 'target' in node) { node.setAttribute('target', '_blank'); node.setAttribute('rel', 'noopener noreferrer'); } From ce3d9fcddec74eca6baac8e7f2a1341c1f2171bf Mon Sep 17 00:00:00 2001 From: RounakJoshi09 <rounakjsh783@gmail.com> Date: Tue, 10 Oct 2023 11:09:30 +0530 Subject: [PATCH 062/126] Added test suggested on PR --- .../mermaid/src/diagrams/flowchart/flowDb.js | 2 +- .../flowchart/parser/flow-style.spec.js | 18 +++++++++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index 9c9442ce27..5e3b7d463e 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -194,7 +194,7 @@ export const updateLink = function (positions, style) { positions.forEach(function (pos) { if (pos >= edges.length) { let error = new Error( - `Incorrect index ${pos} of linkStyle. (Help: Index must be from 0 to ${edges.length - 1})` + `The index for linkStyle is out of bounds. (Help: Ensure that the index is within the range of existing edges.)` ); throw error; } diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js index eb56c24f39..4b461576b1 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js @@ -287,7 +287,23 @@ describe('[Style] when parsing', () => { }); it('should handle style definitions within number of edges', function () { - const res = flow.parser.parse('graph TD\n' + 'A-->B\n' + 'linkStyle 0 stroke-width:1px;'); + try { + flow.parser.parse(`graph TD + A-->B + linkStyle 1 stroke-width:1px;`); + // Fail test if above expression doesn't throw anything. + expect(true).toBe(false); + } catch (e) { + expect(e.message).toBe( + `The index for linkStyle is out of bounds. (Help: Ensure that the index is within the range of existing edges.)` + ); + } + }); + + it('should handle style definitions within number of edges', function () { + const res = flow.parser.parse(`graph TD + A-->B + linkStyle 0 stroke-width:1px;`); const edges = flow.parser.yy.getEdges(); From d1b386b5c93d47b913d45f3172e2f46629fb3cbe Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Wed, 11 Oct 2023 11:32:24 +0530 Subject: [PATCH 063/126] Revert PH changes (#4903) --- packages/mermaid/src/docs/.vitepress/theme/index.ts | 7 ++++--- packages/mermaid/src/docs/index.md | 6 +++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts index ae626558db..6561578106 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/index.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts @@ -6,8 +6,8 @@ import Mermaid from './Mermaid.vue'; import Contributors from '../components/Contributors.vue'; // @ts-ignore import HomePage from '../components/HomePage.vue'; -// @ts-ignore -import TopBar from '../components/TopBar.vue'; +// // @ts-ignore +// import TopBar from '../components/TopBar.vue'; import { getRedirect } from './redirect.js'; @@ -21,7 +21,8 @@ export default { ...DefaultTheme, Layout() { return h(Theme.Layout, null, { - 'home-hero-before': () => h(TopBar), + // Keeping this as comment as it took a lot of time to figure out how to add a component to the top bar. + // 'home-hero-before': () => h(TopBar), 'home-features-after': () => h(HomePage), }); }, diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md index 378e9dfaba..218757b104 100644 --- a/packages/mermaid/src/docs/index.md +++ b/packages/mermaid/src/docs/index.md @@ -31,7 +31,7 @@ features: - title: 🏆 Award winning! details: 2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology". link: https://osawards.com/javascript/2019 - - title: 🎉 We are on Product Hunt! - details: We would love any and all support from the Mermaid community! - link: https://www.producthunt.com/posts/mermaid-chart + - title: 🥰 Mermaid + Mermaid Chart + details: Mermaid Chart is a major supporter of the Mermaid project. + link: https://www.mermaidchart.com/ --- From 7d3c5503378ba38df1539dd8839cd5fdeb804380 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 11 Oct 2023 06:30:11 +0000 Subject: [PATCH 064/126] chore(deps): update all minor dependencies --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index beb76282a3..44e2869f48 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "10.2.4", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", - "packageManager": "pnpm@8.7.6", + "packageManager": "pnpm@8.9.0", "keywords": [ "diagram", "markdown", From 995449cbf665e8eb340a3f01aaccbc31488ab6e2 Mon Sep 17 00:00:00 2001 From: RounakJoshi09 <rounakjsh783@gmail.com> Date: Wed, 11 Oct 2023 20:40:14 +0530 Subject: [PATCH 065/126] Error Message Changed --- .../mermaid/src/diagrams/flowchart/flowDb.js | 7 +++--- .../flowchart/parser/flow-style.spec.js | 22 +++++++++---------- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index 5e3b7d463e..6cd3e2ecfa 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -193,10 +193,11 @@ export const updateLinkInterpolate = function (positions, interp) { export const updateLink = function (positions, style) { positions.forEach(function (pos) { if (pos >= edges.length) { - let error = new Error( - `The index for linkStyle is out of bounds. (Help: Ensure that the index is within the range of existing edges.)` + throw new Error( + `The index ${pos} for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and ${ + edges.length - 1 + }. (Help: Ensure that the index is within the range of existing edges.)` ); - throw error; } if (pos === 'default') { edges.defaultStyle = style; diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js index 4b461576b1..5b0f740bd9 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js @@ -287,17 +287,17 @@ describe('[Style] when parsing', () => { }); it('should handle style definitions within number of edges', function () { - try { - flow.parser.parse(`graph TD - A-->B - linkStyle 1 stroke-width:1px;`); - // Fail test if above expression doesn't throw anything. - expect(true).toBe(false); - } catch (e) { - expect(e.message).toBe( - `The index for linkStyle is out of bounds. (Help: Ensure that the index is within the range of existing edges.)` - ); - } + expect(() => + flow.parser + .parse( + `graph TD + A-->B + linkStyle 1 stroke-width:1px;` + ) + .toThrow( + 'The index 1 for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and 0. (Help: Ensure that the index is within the range of existing edges.)' + ) + ); }); it('should handle style definitions within number of edges', function () { From ab2345093e25cd366ddd360d6238c46c77f273ca Mon Sep 17 00:00:00 2001 From: Marcel Ribeiro-Dantas <mribeirodantas@seqera.io> Date: Wed, 11 Oct 2023 16:41:04 -0300 Subject: [PATCH 066/126] Revert error typo fix --- packages/mermaid/src/diagrams/sequence/sequenceDb.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js index 7f893611d1..6c3f1f64df 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js @@ -126,7 +126,7 @@ export const addSignal = function ( const cnt = activationCount(idFrom.actor); if (cnt < 1) { // Bail out as there is an activation signal from an inactive participant - let error = new Error('Trying to deactivate an inactive participant (' + idFrom.actor + ')'); + let error = new Error('Trying to inactivate an inactive participant (' + idFrom.actor + ')'); error.hash = { text: '->>-', token: '->>-', From 4b8441a1a008b34fcd48cd30eeaad7b69e22e7d5 Mon Sep 17 00:00:00 2001 From: Marcel Ribeiro-Dantas <mribeirodantas@seqera.io> Date: Thu, 12 Oct 2023 01:27:08 -0300 Subject: [PATCH 067/126] Prettify table --- docs/syntax/quadrantChart.md | 38 +++++++++---------- .../mermaid/src/docs/syntax/quadrantChart.md | 38 +++++++++---------- 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/docs/syntax/quadrantChart.md b/docs/syntax/quadrantChart.md index 97bc94e36e..9f22fd5753 100644 --- a/docs/syntax/quadrantChart.md +++ b/docs/syntax/quadrantChart.md @@ -102,26 +102,26 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text> ## Chart Configurations -| Parameter | Description | Default value | -| --------------------------------- | ------------------------------------------------------------------------------------------------- | :-----------: | -| chartWidth | Width of the chart | 500 | -| chartHeight | Height of the chart | 500 | -| titlePadding | Top and Bottom padding of the title | 10 | -| titleFontSize | Title font size | 20 | -| quadrantPadding | Padding outside all the quadrants | 5 | -| quadrantTextTopPadding | Quadrant text top padding when text is drawn on top ( not data points are there) | 5 | -| quadrantLabelFontSize | Quadrant text font size | 16 | -| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants | 1 | -| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 | -| xAxisLabelPadding | Top and bottom padding of x-axis text | 5 | -| xAxisLabelFontSize | X-axis texts font size | 16 | +| Parameter | Description | Default value | +| --------------------------------- | -------------------------------------------------------------------------------------------------- | :-----------: | +| chartWidth | Width of the chart | 500 | +| chartHeight | Height of the chart | 500 | +| titlePadding | Top and Bottom padding of the title | 10 | +| titleFontSize | Title font size | 20 | +| quadrantPadding | Padding outside all the quadrants | 5 | +| quadrantTextTopPadding | Quadrant text top padding when text is drawn on top ( not data points are there) | 5 | +| quadrantLabelFontSize | Quadrant text font size | 16 | +| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants | 1 | +| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 | +| xAxisLabelPadding | Top and bottom padding of x-axis text | 5 | +| xAxisLabelFontSize | X-axis texts font size | 16 | | xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom | 'top' | -| yAxisLabelPadding | Left and Right padding of y-axis text | 5 | -| yAxisLabelFontSize | Y-axis texts font size | 16 | -| yAxisPosition | Position of y-axis (left , right) | 'left' | -| pointTextPadding | Padding between point and the below text | 5 | -| pointLabelFontSize | Point text font size | 12 | -| pointRadius | Radius of the point to be drawn | 5 | +| yAxisLabelPadding | Left and Right padding of y-axis text | 5 | +| yAxisLabelFontSize | Y-axis texts font size | 16 | +| yAxisPosition | Position of y-axis (left , right) | 'left' | +| pointTextPadding | Padding between point and the below text | 5 | +| pointLabelFontSize | Point text font size | 12 | +| pointRadius | Radius of the point to be drawn | 5 | ## Chart Theme Variables diff --git a/packages/mermaid/src/docs/syntax/quadrantChart.md b/packages/mermaid/src/docs/syntax/quadrantChart.md index 6e0494270b..d6793aea61 100644 --- a/packages/mermaid/src/docs/syntax/quadrantChart.md +++ b/packages/mermaid/src/docs/syntax/quadrantChart.md @@ -83,26 +83,26 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text> ## Chart Configurations -| Parameter | Description | Default value | -| --------------------------------- | ------------------------------------------------------------------------------------------------- | :-----------: | -| chartWidth | Width of the chart | 500 | -| chartHeight | Height of the chart | 500 | -| titlePadding | Top and Bottom padding of the title | 10 | -| titleFontSize | Title font size | 20 | -| quadrantPadding | Padding outside all the quadrants | 5 | -| quadrantTextTopPadding | Quadrant text top padding when text is drawn on top ( not data points are there) | 5 | -| quadrantLabelFontSize | Quadrant text font size | 16 | -| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants | 1 | -| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 | -| xAxisLabelPadding | Top and bottom padding of x-axis text | 5 | -| xAxisLabelFontSize | X-axis texts font size | 16 | +| Parameter | Description | Default value | +| --------------------------------- | -------------------------------------------------------------------------------------------------- | :-----------: | +| chartWidth | Width of the chart | 500 | +| chartHeight | Height of the chart | 500 | +| titlePadding | Top and Bottom padding of the title | 10 | +| titleFontSize | Title font size | 20 | +| quadrantPadding | Padding outside all the quadrants | 5 | +| quadrantTextTopPadding | Quadrant text top padding when text is drawn on top ( not data points are there) | 5 | +| quadrantLabelFontSize | Quadrant text font size | 16 | +| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants | 1 | +| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 | +| xAxisLabelPadding | Top and bottom padding of x-axis text | 5 | +| xAxisLabelFontSize | X-axis texts font size | 16 | | xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom | 'top' | -| yAxisLabelPadding | Left and Right padding of y-axis text | 5 | -| yAxisLabelFontSize | Y-axis texts font size | 16 | -| yAxisPosition | Position of y-axis (left , right) | 'left' | -| pointTextPadding | Padding between point and the below text | 5 | -| pointLabelFontSize | Point text font size | 12 | -| pointRadius | Radius of the point to be drawn | 5 | +| yAxisLabelPadding | Left and Right padding of y-axis text | 5 | +| yAxisLabelFontSize | Y-axis texts font size | 16 | +| yAxisPosition | Position of y-axis (left , right) | 'left' | +| pointTextPadding | Padding between point and the below text | 5 | +| pointLabelFontSize | Point text font size | 12 | +| pointRadius | Radius of the point to be drawn | 5 | ## Chart Theme Variables From 9080f1f35439410ab55f0e206dbc5d674c770183 Mon Sep 17 00:00:00 2001 From: Marcel Ribeiro-Dantas <mribeirodantas@seqera.io> Date: Thu, 12 Oct 2023 01:33:25 -0300 Subject: [PATCH 068/126] Revert typo fix --- packages/mermaid/src/mermaid.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts index 9c3bd31baa..645b5b39cb 100644 --- a/packages/mermaid/src/mermaid.spec.ts +++ b/packages/mermaid/src/mermaid.spec.ts @@ -174,7 +174,7 @@ describe('when using mermaid and ', () => { await expect(mermaid.parse('graph TQ;A--x|text including URL space|B;')).rejects .toThrowErrorMatchingInlineSnapshot(` "Lexical error on line 1. Unrecognized text. - graph TQ;A--x|text include + graph TQ;A--x|text includ -----^" `); }); From 345e82abeedb28b56884cc024af808911d7e49de Mon Sep 17 00:00:00 2001 From: Harshit Anand <harshitanand283@gmail.com> Date: Sat, 14 Oct 2023 00:50:09 +0530 Subject: [PATCH 069/126] fix: removed static target=_blank instaed value will fetched from the target attribute --- .../mermaid/src/diagrams/common/common.ts | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts index e9d5ca42d3..84db828435 100644 --- a/packages/mermaid/src/diagrams/common/common.ts +++ b/packages/mermaid/src/diagrams/common/common.ts @@ -28,18 +28,21 @@ export const removeScript = (txt: string): string => { return DOMPurify.sanitize(txt); }; -DOMPurify.addHook('afterSanitizeAttributes', function (node) { - // set all elements owning target to target=_blank - if (node.tagName === 'A' && node.hasAttribute('href') && 'target' in node) { - node.setAttribute('target', '_blank'); - node.setAttribute('rel', 'noopener noreferrer'); +const TEMPORARY_ATTRIBUTE = 'data-temp-href-target'; + +DOMPurify.addHook('beforeSanitizeAttributes', function (node) { + if (node.tagName === 'A' && node.hasAttribute('target')) { + node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || ''); } - // set non-HTML/MathML links to xlink:show=new - if ( - !node.hasAttribute('target') && - (node.hasAttribute('xlink:href') || node.hasAttribute('href')) - ) { - node.setAttribute('xlink:show', 'new'); +}); + +DOMPurify.addHook('afterSanitizeAttributes', function (node) { + if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) { + node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || ''); + node.removeAttribute(TEMPORARY_ATTRIBUTE); + if (node.getAttribute('target') === '_blank') { + node.setAttribute('rel', 'noopener'); + } } }); From d97e31a38cc8522c9a5efac2af7403c986938133 Mon Sep 17 00:00:00 2001 From: Susheel Thapa <83917129+SusheelThapa@users.noreply.github.com> Date: Mon, 16 Oct 2023 16:54:36 +0545 Subject: [PATCH 070/126] Chore: Typo fixed in multiple files --- docs/config/accessibility.md | 8 ++++---- docs/syntax/c4.md | 4 ++-- docs/syntax/flowchart.md | 6 +++--- docs/syntax/quadrantChart.md | 2 +- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/config/accessibility.md b/docs/config/accessibility.md index bf8b3e5915..836d6bcb23 100644 --- a/docs/config/accessibility.md +++ b/docs/config/accessibility.md @@ -97,7 +97,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam graph LR accTitle: Big Decisions accDescr: Bob's Burgers process for making big decisions - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` @@ -105,7 +105,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam graph LR accTitle: Big Decisions accDescr: Bob's Burgers process for making big decisions - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` @@ -137,7 +137,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr for making very, very big decisions. This is actually a very simple flow: identify the big decision and then make the big decision. } - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` @@ -149,7 +149,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr for making very, very big decisions. This is actually a very simple flow: identify the big decision and then make the big decision. } - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` diff --git a/docs/syntax/c4.md b/docs/syntax/c4.md index 1676708f50..e6b7736c33 100644 --- a/docs/syntax/c4.md +++ b/docs/syntax/c4.md @@ -399,7 +399,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60") title Component diagram for Internet Banking System - API Application Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.") - Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.") + Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.") ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") @@ -439,7 +439,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60") title Component diagram for Internet Banking System - API Application Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.") - Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.") + Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.") ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index acd7c2db5b..1bdce6aa63 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -764,7 +764,7 @@ flowchart LR end %% ^ These subgraphs are identical, except for the links to them: - %% Link *to* subgraph1: subgraph1 direction is mantained + %% Link *to* subgraph1: subgraph1 direction is maintained outside --> subgraph1 %% Link *within* subgraph2: %% subgraph2 inherits the direction of the top-level graph (LR) @@ -783,7 +783,7 @@ flowchart LR end %% ^ These subgraphs are identical, except for the links to them: - %% Link *to* subgraph1: subgraph1 direction is mantained + %% Link *to* subgraph1: subgraph1 direction is maintained outside --> subgraph1 %% Link *within* subgraph2: %% subgraph2 inherits the direction of the top-level graph (LR) @@ -1112,7 +1112,7 @@ flowchart TD B-->E(A fa:fa-camera-retro perhaps?) ``` -Mermaid is compatible with Font Awesome up to verion 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free). +Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free). ## Graph declarations with spaces between vertices and link and without semicolon diff --git a/docs/syntax/quadrantChart.md b/docs/syntax/quadrantChart.md index 39b57fd131..97bc94e36e 100644 --- a/docs/syntax/quadrantChart.md +++ b/docs/syntax/quadrantChart.md @@ -115,7 +115,7 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text> | quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 | | xAxisLabelPadding | Top and bottom padding of x-axis text | 5 | | xAxisLabelFontSize | X-axis texts font size | 16 | -| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will alway be rendered in bottom | 'top' | +| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom | 'top' | | yAxisLabelPadding | Left and Right padding of y-axis text | 5 | | yAxisLabelFontSize | Y-axis texts font size | 16 | | yAxisPosition | Position of y-axis (left , right) | 'left' | From e4350f80fe9bc1d091ca84e3f793d7019338f00f Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 16 Oct 2023 19:52:01 +0000 Subject: [PATCH 071/126] chore(deps): update all patch dependencies --- docker-compose.yml | 2 +- package.json | 4 +- packages/mermaid/src/docs/package.json | 2 +- pnpm-lock.yaml | 123 ++++++++++++++++++------- 4 files changed, 95 insertions(+), 36 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 125ce5da8f..e2484bdc52 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,7 +1,7 @@ version: '3.9' services: mermaid: - image: node:18.18.0-alpine3.18 + image: node:18.18.2-alpine3.18 stdin_open: true tty: true working_dir: /mermaid diff --git a/package.json b/package.json index 44e2869f48..ee0c01413c 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "10.2.4", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", - "packageManager": "pnpm@8.9.0", + "packageManager": "pnpm@8.9.2", "keywords": [ "diagram", "markdown", @@ -123,7 +123,7 @@ "vitest": "^0.34.0" }, "volta": { - "node": "18.18.0" + "node": "18.18.2" }, "nyc": { "report-dir": "coverage/cypress" diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index ff8a03d5df..a7ec3312aa 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -32,7 +32,7 @@ "unplugin-vue-components": "^0.25.0", "vite": "^4.3.9", "vite-plugin-pwa": "^0.16.0", - "vitepress": "1.0.0-rc.20", + "vitepress": "1.0.0-rc.22", "workbox-window": "^7.0.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 79f4087b00..c689554067 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -475,8 +475,8 @@ importers: specifier: ^0.16.0 version: 0.16.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0) vitepress: - specifier: 1.0.0-rc.20 - version: 1.0.0-rc.20(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0) + specifier: 1.0.0-rc.22 + version: 1.0.0-rc.22(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0) workbox-window: specifier: ^7.0.0 version: 7.0.0 @@ -4562,6 +4562,10 @@ packages: resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==} dev: true + /@types/web-bluetooth@0.0.18: + resolution: {integrity: sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw==} + dev: true + /@types/ws@8.5.5: resolution: {integrity: sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==} dependencies: @@ -5267,6 +5271,10 @@ packages: /@vue/devtools-api@6.5.0: resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==} + /@vue/devtools-api@6.5.1: + resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==} + dev: true + /@vue/reactivity-transform@3.3.4: resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==} dependencies: @@ -5330,20 +5338,20 @@ packages: - vue dev: true - /@vueuse/core@10.4.1(vue@3.3.4): - resolution: {integrity: sha512-DkHIfMIoSIBjMgRRvdIvxsyboRZQmImofLyOHADqiVbQVilP8VVHDhBX2ZqoItOgu7dWa8oXiNnScOdPLhdEXg==} + /@vueuse/core@10.5.0(vue@3.3.4): + resolution: {integrity: sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==} dependencies: - '@types/web-bluetooth': 0.0.17 - '@vueuse/metadata': 10.4.1 - '@vueuse/shared': 10.4.1(vue@3.3.4) - vue-demi: 0.14.5(vue@3.3.4) + '@types/web-bluetooth': 0.0.18 + '@vueuse/metadata': 10.5.0 + '@vueuse/shared': 10.5.0(vue@3.3.4) + vue-demi: 0.14.6(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue dev: true - /@vueuse/integrations@10.4.1(focus-trap@7.5.2)(vue@3.3.4): - resolution: {integrity: sha512-uRBPyG5Lxoh1A/J+boiioPT3ELEAPEo4t8W6Mr4yTKIQBeW/FcbsotZNPr4k9uz+3QEksMmflWloS9wCnypM7g==} + /@vueuse/integrations@10.5.0(focus-trap@7.5.4)(vue@3.3.4): + resolution: {integrity: sha512-fm5sXLCK0Ww3rRnzqnCQRmfjDURaI4xMsx+T+cec0ngQqHx/JgUtm8G0vRjwtonIeTBsH1Q8L3SucE+7K7upJQ==} peerDependencies: async-validator: '*' axios: '*' @@ -5383,10 +5391,10 @@ packages: universal-cookie: optional: true dependencies: - '@vueuse/core': 10.4.1(vue@3.3.4) - '@vueuse/shared': 10.4.1(vue@3.3.4) - focus-trap: 7.5.2 - vue-demi: 0.14.5(vue@3.3.4) + '@vueuse/core': 10.5.0(vue@3.3.4) + '@vueuse/shared': 10.5.0(vue@3.3.4) + focus-trap: 7.5.4 + vue-demi: 0.14.6(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -5400,8 +5408,8 @@ packages: resolution: {integrity: sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw==} dev: true - /@vueuse/metadata@10.4.1: - resolution: {integrity: sha512-2Sc8X+iVzeuMGHr6O2j4gv/zxvQGGOYETYXEc41h0iZXIRnRbJZGmY/QP8dvzqUelf8vg0p/yEA5VpCEu+WpZg==} + /@vueuse/metadata@10.5.0: + resolution: {integrity: sha512-fEbElR+MaIYyCkeM0SzWkdoMtOpIwO72x8WsZHRE7IggiOlILttqttM69AS13nrDxosnDBYdyy3C5mR1LCxHsw==} dev: true /@vueuse/shared@10.1.0(vue@3.3.4): @@ -5422,10 +5430,10 @@ packages: - vue dev: true - /@vueuse/shared@10.4.1(vue@3.3.4): - resolution: {integrity: sha512-vz5hbAM4qA0lDKmcr2y3pPdU+2EVw/yzfRsBdu+6+USGa4PxqSQRYIUC9/NcT06y+ZgaTsyURw2I9qOFaaXHAg==} + /@vueuse/shared@10.5.0(vue@3.3.4): + resolution: {integrity: sha512-18iyxbbHYLst9MqU1X1QNdMHIjks6wC7XTVf0KNOv5es/Ms6gjVFCAAWTVP2JStuGqydg3DT+ExpFORUEi9yhg==} dependencies: - vue-demi: 0.14.5(vue@3.3.4) + vue-demi: 0.14.6(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -9274,8 +9282,8 @@ packages: resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==} dev: true - /focus-trap@7.5.2: - resolution: {integrity: sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==} + /focus-trap@7.5.4: + resolution: {integrity: sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==} dependencies: tabbable: 6.2.0 dev: true @@ -14040,8 +14048,8 @@ packages: vscode-textmate: 8.0.0 dev: true - /shiki@0.14.4: - resolution: {integrity: sha512-IXCRip2IQzKwxArNNq1S+On4KPML3Yyn8Zzs/xRgcgOWIr8ntIK3IKzjFPfjy/7kt9ZMjc+FItfqHRBg8b6tNQ==} + /shiki@0.14.5: + resolution: {integrity: sha512-1gCAYOcmCFONmErGTrS1fjzJLA7MGZmKzrBNX7apqSwhyITJg2O102uFzXUeBxNnEkDA9vHIKLyeKq0V083vIw==} dependencies: ansi-sequence-parser: 1.1.1 jsonc-parser: 3.2.0 @@ -15528,6 +15536,42 @@ packages: - supports-color dev: true + /vite@4.4.11(@types/node@18.17.5): + resolution: {integrity: sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + '@types/node': 18.17.5 + esbuild: 0.18.20 + postcss: 8.4.27 + rollup: 3.28.0 + optionalDependencies: + fsevents: 2.3.2 + dev: true + /vite@4.4.9(@types/node@18.17.5): resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==} engines: {node: ^14.18.0 || >=16.0.0} @@ -15612,12 +15656,12 @@ packages: - terser dev: true - /vitepress@1.0.0-rc.20(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0): - resolution: {integrity: sha512-CykMUJ8JLxLcGWek0ew3wln4RYbsOd1+0YzXITTpajggpynm2S331TNkJVOkHrMRc6GYe3y4pS40GfgcW0ZwAw==} + /vitepress@1.0.0-rc.22(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0): + resolution: {integrity: sha512-n7le5iikCFgWMuX7sKfzDGJGlrsYQ5trG3S97BghNz2alOTr4Xp+GrB6ShwogUTX9gNgeNmrACjokhW55LNeBA==} hasBin: true peerDependencies: markdown-it-mathjax3: ^4.3.2 - postcss: ^8.4.30 + postcss: ^8.4.31 peerDependenciesMeta: markdown-it-mathjax3: optional: true @@ -15627,15 +15671,15 @@ packages: '@docsearch/css': 3.5.2 '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0) '@types/markdown-it': 13.0.2 - '@vue/devtools-api': 6.5.0 - '@vueuse/core': 10.4.1(vue@3.3.4) - '@vueuse/integrations': 10.4.1(focus-trap@7.5.2)(vue@3.3.4) - focus-trap: 7.5.2 + '@vue/devtools-api': 6.5.1 + '@vueuse/core': 10.5.0(vue@3.3.4) + '@vueuse/integrations': 10.5.0(focus-trap@7.5.4)(vue@3.3.4) + focus-trap: 7.5.4 mark.js: 8.11.1 minisearch: 6.1.0 postcss: 8.4.27 - shiki: 0.14.4 - vite: 4.4.9(@types/node@18.17.5) + shiki: 0.14.5 + vite: 4.4.11(@types/node@18.17.5) vue: 3.3.4 transitivePeerDependencies: - '@algolia/client-search' @@ -15779,6 +15823,21 @@ packages: dependencies: vue: 3.3.4 + /vue-demi@0.14.6(vue@3.3.4): + resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + peerDependencies: + '@vue/composition-api': ^1.0.0-rc.1 + vue: ^3.0.0-0 || ^2.6.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + dependencies: + vue: 3.3.4 + dev: true + /vue@3.3.4: resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==} dependencies: From 0e328823b91dd7c4a3450778008b7a6e25aee473 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 17 Oct 2023 11:08:38 +0000 Subject: [PATCH 072/126] Bump @babel/traverse from 7.22.10 to 7.23.2 Bumps [@babel/traverse](https://github.com/babel/babel/tree/HEAD/packages/babel-traverse) from 7.22.10 to 7.23.2. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.23.2/packages/babel-traverse) --- updated-dependencies: - dependency-name: "@babel/traverse" dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> --- pnpm-lock.yaml | 137 ++++++++++++++++++++++++++++++++++++------------- 1 file changed, 100 insertions(+), 37 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c689554067..2fab1d4a01 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1061,6 +1061,14 @@ packages: chalk: 2.4.2 dev: true + /@babel/code-frame@7.22.13: + resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/highlight': 7.22.20 + chalk: 2.4.2 + dev: true + /@babel/compat-data@7.22.9: resolution: {integrity: sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==} engines: {node: '>=6.9.0'} @@ -1078,7 +1086,7 @@ packages: '@babel/helpers': 7.22.10 '@babel/parser': 7.22.10 '@babel/template': 7.22.5 - '@babel/traverse': 7.22.10 + '@babel/traverse': 7.23.2 '@babel/types': 7.22.10 convert-source-map: 1.9.0 debug: 4.3.4(supports-color@8.1.1) @@ -1099,18 +1107,28 @@ packages: jsesc: 2.5.2 dev: true + /@babel/generator@7.23.0: + resolution: {integrity: sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.23.0 + '@jridgewell/gen-mapping': 0.3.3 + '@jridgewell/trace-mapping': 0.3.19 + jsesc: 2.5.2 + dev: true + /@babel/helper-annotate-as-pure@7.22.5: resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@babel/helper-builder-binary-assignment-operator-visitor@7.22.10: resolution: {integrity: sha512-Av0qubwDQxC56DoUReVDeLfMEjYYSN1nZrTUrWkXd7hpU73ymRANkbuDm3yni9npkn+RXy9nNbEJZEzXr7xrfQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@babel/helper-compilation-targets@7.22.10: @@ -1132,8 +1150,8 @@ packages: dependencies: '@babel/core': 7.22.10 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-environment-visitor': 7.22.5 - '@babel/helper-function-name': 7.22.5 + '@babel/helper-environment-visitor': 7.22.20 + '@babel/helper-function-name': 7.23.0 '@babel/helper-member-expression-to-functions': 7.22.5 '@babel/helper-optimise-call-expression': 7.22.5 '@babel/helper-replace-supers': 7.22.9(@babel/core@7.22.10) @@ -1169,31 +1187,36 @@ packages: - supports-color dev: true + /@babel/helper-environment-visitor@7.22.20: + resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==} + engines: {node: '>=6.9.0'} + dev: true + /@babel/helper-environment-visitor@7.22.5: resolution: {integrity: sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==} engines: {node: '>=6.9.0'} dev: true - /@babel/helper-function-name@7.22.5: - resolution: {integrity: sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==} + /@babel/helper-function-name@7.23.0: + resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/template': 7.22.5 - '@babel/types': 7.22.10 + '@babel/template': 7.22.15 + '@babel/types': 7.23.0 dev: true /@babel/helper-hoist-variables@7.22.5: resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@babel/helper-member-expression-to-functions@7.22.5: resolution: {integrity: sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@babel/helper-module-imports@7.22.5: @@ -1221,7 +1244,7 @@ packages: resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@babel/helper-plugin-utils@7.22.5: @@ -1237,7 +1260,7 @@ packages: dependencies: '@babel/core': 7.22.10 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-environment-visitor': 7.22.5 + '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-wrap-function': 7.22.10 dev: true @@ -1248,7 +1271,7 @@ packages: '@babel/core': ^7.0.0 dependencies: '@babel/core': 7.22.10 - '@babel/helper-environment-visitor': 7.22.5 + '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-member-expression-to-functions': 7.22.5 '@babel/helper-optimise-call-expression': 7.22.5 dev: true @@ -1264,20 +1287,25 @@ packages: resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@babel/helper-split-export-declaration@7.22.6: resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@babel/helper-string-parser@7.22.5: resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==} engines: {node: '>=6.9.0'} + /@babel/helper-validator-identifier@7.22.20: + resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==} + engines: {node: '>=6.9.0'} + dev: true + /@babel/helper-validator-identifier@7.22.5: resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==} engines: {node: '>=6.9.0'} @@ -1291,9 +1319,9 @@ packages: resolution: {integrity: sha512-OnMhjWjuGYtdoO3FmsEFWvBStBAe2QOgwOLsLNDjN+aaiMD8InJk1/O3HSD8lkqTjCgg5YI34Tz15KNNA3p+nQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/helper-function-name': 7.22.5 - '@babel/template': 7.22.5 - '@babel/types': 7.22.10 + '@babel/helper-function-name': 7.23.0 + '@babel/template': 7.22.15 + '@babel/types': 7.23.0 dev: true /@babel/helpers@7.22.10: @@ -1301,7 +1329,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/template': 7.22.5 - '@babel/traverse': 7.22.10 + '@babel/traverse': 7.23.2 '@babel/types': 7.22.10 transitivePeerDependencies: - supports-color @@ -1316,6 +1344,15 @@ packages: js-tokens: 4.0.0 dev: true + /@babel/highlight@7.22.20: + resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-validator-identifier': 7.22.20 + chalk: 2.4.2 + js-tokens: 4.0.0 + dev: true + /@babel/parser@7.22.10: resolution: {integrity: sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==} engines: {node: '>=6.0.0'} @@ -1323,6 +1360,14 @@ packages: dependencies: '@babel/types': 7.22.10 + /@babel/parser@7.23.0: + resolution: {integrity: sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==} + engines: {node: '>=6.0.0'} + hasBin: true + dependencies: + '@babel/types': 7.23.0 + dev: true + /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.5(@babel/core@7.22.10): resolution: {integrity: sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==} engines: {node: '>=6.9.0'} @@ -1569,7 +1614,7 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.22.10 - '@babel/helper-environment-visitor': 7.22.5 + '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-remap-async-to-generator': 7.22.9(@babel/core@7.22.10) '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.22.10) @@ -1639,8 +1684,8 @@ packages: '@babel/core': 7.22.10 '@babel/helper-annotate-as-pure': 7.22.5 '@babel/helper-compilation-targets': 7.22.10 - '@babel/helper-environment-visitor': 7.22.5 - '@babel/helper-function-name': 7.22.5 + '@babel/helper-environment-visitor': 7.22.20 + '@babel/helper-function-name': 7.23.0 '@babel/helper-optimise-call-expression': 7.22.5 '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-replace-supers': 7.22.9(@babel/core@7.22.10) @@ -1656,7 +1701,7 @@ packages: dependencies: '@babel/core': 7.22.10 '@babel/helper-plugin-utils': 7.22.5 - '@babel/template': 7.22.5 + '@babel/template': 7.22.15 dev: true /@babel/plugin-transform-destructuring@7.22.10(@babel/core@7.22.10): @@ -1741,7 +1786,7 @@ packages: dependencies: '@babel/core': 7.22.10 '@babel/helper-compilation-targets': 7.22.10 - '@babel/helper-function-name': 7.22.5 + '@babel/helper-function-name': 7.23.0 '@babel/helper-plugin-utils': 7.22.5 dev: true @@ -1820,7 +1865,7 @@ packages: '@babel/helper-hoist-variables': 7.22.5 '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.10) '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-validator-identifier': 7.22.5 + '@babel/helper-validator-identifier': 7.22.20 dev: true /@babel/plugin-transform-modules-umd@7.22.5(@babel/core@7.22.10): @@ -2165,7 +2210,7 @@ packages: '@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.22.10) '@babel/plugin-transform-unicode-sets-regex': 7.22.5(@babel/core@7.22.10) '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.22.10) - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 babel-plugin-polyfill-corejs2: 0.4.5(@babel/core@7.22.10) babel-plugin-polyfill-corejs3: 0.8.3(@babel/core@7.22.10) babel-plugin-polyfill-regenerator: 0.5.2(@babel/core@7.22.10) @@ -2182,7 +2227,7 @@ packages: dependencies: '@babel/core': 7.22.10 '@babel/helper-plugin-utils': 7.22.5 - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 esutils: 2.0.3 dev: true @@ -2197,6 +2242,15 @@ packages: regenerator-runtime: 0.14.0 dev: true + /@babel/template@7.22.15: + resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/code-frame': 7.22.13 + '@babel/parser': 7.23.0 + '@babel/types': 7.23.0 + dev: true + /@babel/template@7.22.5: resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==} engines: {node: '>=6.9.0'} @@ -2206,18 +2260,18 @@ packages: '@babel/types': 7.22.10 dev: true - /@babel/traverse@7.22.10: - resolution: {integrity: sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==} + /@babel/traverse@7.23.2: + resolution: {integrity: sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/code-frame': 7.22.10 - '@babel/generator': 7.22.10 - '@babel/helper-environment-visitor': 7.22.5 - '@babel/helper-function-name': 7.22.5 + '@babel/code-frame': 7.22.13 + '@babel/generator': 7.23.0 + '@babel/helper-environment-visitor': 7.22.20 + '@babel/helper-function-name': 7.23.0 '@babel/helper-hoist-variables': 7.22.5 '@babel/helper-split-export-declaration': 7.22.6 - '@babel/parser': 7.22.10 - '@babel/types': 7.22.10 + '@babel/parser': 7.23.0 + '@babel/types': 7.23.0 debug: 4.3.4(supports-color@8.1.1) globals: 11.12.0 transitivePeerDependencies: @@ -2232,6 +2286,15 @@ packages: '@babel/helper-validator-identifier': 7.22.5 to-fast-properties: 2.0.0 + /@babel/types@7.23.0: + resolution: {integrity: sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-string-parser': 7.22.5 + '@babel/helper-validator-identifier': 7.22.20 + to-fast-properties: 2.0.0 + dev: true + /@bcherny/json-schema-ref-parser@9.0.9: resolution: {integrity: sha512-vmEmnJCfpkLdas++9OYg6riIezTYqTHpqUTODJzHLzs5UnXujbOJW9VwcVCnyo1mVRt32FRr23iXBx/sX8YbeQ==} dependencies: @@ -13729,7 +13792,7 @@ packages: peerDependencies: rollup: ^2.0.0 dependencies: - '@babel/code-frame': 7.22.10 + '@babel/code-frame': 7.22.13 jest-worker: 26.6.2 rollup: 2.79.1 serialize-javascript: 4.0.0 From 31ec3d14960afad5b7a97d62029234fd0045da89 Mon Sep 17 00:00:00 2001 From: Anthony Damico <ajdamico@gmail.com> Date: Tue, 17 Oct 2023 10:30:29 -0400 Subject: [PATCH 073/126] Update questions-and-suggestions.md --- .../mermaid/src/docs/community/questions-and-suggestions.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/docs/community/questions-and-suggestions.md b/packages/mermaid/src/docs/community/questions-and-suggestions.md index 6d6f80fb6d..b18a83ab59 100644 --- a/packages/mermaid/src/docs/community/questions-and-suggestions.md +++ b/packages/mermaid/src/docs/community/questions-and-suggestions.md @@ -4,9 +4,9 @@ ## First search to see if someone has already asked (and hopefully been answered) or suggested the same thing. -- Search in Discussions -- Search in open Issues -- Search in closed Issues +- [Search in Discussions](https://github.com/orgs/mermaid-js/discussions) +- [Search in open Issues](https://github.com/mermaid-js/mermaid/issues?q=is%3Aopen+is%3Aissue) +- [Search in closed Issues](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aclosed) If you find an open issue or discussion thread that is similar to your question but isn't answered, you can let us know that you are also interested in it. Use the GitHub reactions to add a thumbs-up to the issue or discussion thread. From 3389ecdfea6d3d0dcea8cd19fcbd29b3869ba085 Mon Sep 17 00:00:00 2001 From: Claes Gill <claes@claesgill.com> Date: Thu, 19 Oct 2023 22:48:49 +0200 Subject: [PATCH 074/126] Updated README with expandable table of content. --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index 04747385a2..e1f2fae9a4 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,22 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai <a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a> +## Table of content + +<details> +<summary>Expand contents</summary> + +- [About](#about) +- [Examples](#examples) +- [Release](#release) +- [Related projects](#related-projects) +- [Contributors](#contributors) +- [Security and safe diagrams](#security-and-safe-diagrams) +- [Reporting vulnerabilities](#reporting-vulnerabilities) +- [Appreciation](#appreciation) + +</details> + ## About <!-- <Main description> --> From 61bc293a950d8bf9f5ff1208a94a4800cd46d332 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist <knsv@sveido.com> Date: Fri, 20 Oct 2023 11:12:56 +0200 Subject: [PATCH 075/126] #4967 Reverting optimimization that breaks subgraphs --- cypress/platform/knsv2.html | 6 ++++-- .../mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js | 6 ++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 6ade6a2e5c..13094644bd 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -58,8 +58,10 @@ </head> <body> <pre id="diagram" class="mermaid"> - classDiagram - `Class<img src=x onerror=alert(1)>` <|-- `Class2<img src=x onerror=alert(2)>` +flowchart-elk LR + subgraph example + node + end </pre> <pre id="diagram" class="mermaid2"> flowchart diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index 737b492fb3..ce2bbc002b 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -803,8 +803,14 @@ const insertChildren = (nodeArray, parentLookupDb) => { */ export const draw = async function (text, id, _version, diagObj) { + // Add temporary render element + diagObj.db.clear(); nodeDb = {}; portPos = {}; + diagObj.db.setGen('gen-2'); + // Parse the graph definition + diagObj.parser.parse(text); + const renderEl = select('body').append('div').attr('style', 'height:400px').attr('id', 'cy'); let graph = { id: 'root', From aaf0b474d498239bd430be0438523699237fd516 Mon Sep 17 00:00:00 2001 From: Per Brolin <per@mermaidchart.com> Date: Fri, 20 Oct 2023 14:18:07 +0200 Subject: [PATCH 076/126] Increased version to 10.5.1 --- packages/mermaid/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 10bb672706..608d19dbf1 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "10.5.0", + "version": "10.5.1", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs", @@ -133,4 +133,4 @@ "publishConfig": { "access": "public" } -} +} \ No newline at end of file From b70959daa7666d25416ab3c4b89ffbc328927d20 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist <knsv@sveido.com> Date: Fri, 20 Oct 2023 14:30:52 +0200 Subject: [PATCH 077/126] Version 10.5.1 --- packages/mermaid/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 608d19dbf1..cf2bacf3a3 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -133,4 +133,4 @@ "publishConfig": { "access": "public" } -} \ No newline at end of file +} From ab9b9abdf932eb15697975766dc9d16b8a063e9d Mon Sep 17 00:00:00 2001 From: Remco Haszing <remcohaszing@gmail.com> Date: Fri, 20 Oct 2023 16:55:01 +0200 Subject: [PATCH 078/126] Replace rehype-mermaidjs with rehype-mermaid The package was renamed. --- docs/ecosystem/integrations-community.md | 2 +- packages/mermaid/src/docs/ecosystem/integrations-community.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index 2c67cc3618..55629f86e8 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -175,7 +175,7 @@ Communication tools and platforms - [remark](https://remark.js.org/) - [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs) - [rehype](https://github.com/rehypejs/rehype) - - [rehype-mermaidjs](https://github.com/remcohaszing/rehype-mermaidjs) + - [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid) - [Gatsby](https://www.gatsbyjs.com/) - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid) - [JSDoc](https://jsdoc.app/) diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md index 3a3a20de8f..ae7e5b71b4 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations-community.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md @@ -173,7 +173,7 @@ Communication tools and platforms - [remark](https://remark.js.org/) - [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs) - [rehype](https://github.com/rehypejs/rehype) - - [rehype-mermaidjs](https://github.com/remcohaszing/rehype-mermaidjs) + - [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid) - [Gatsby](https://www.gatsbyjs.com/) - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid) - [JSDoc](https://jsdoc.app/) From f31cddee0c76a7f16a22df7a66dc8d7d5926bbde Mon Sep 17 00:00:00 2001 From: Sahil Nagpure <76729141+SahilNagpure07@users.noreply.github.com> Date: Sun, 22 Oct 2023 12:27:55 +0530 Subject: [PATCH 079/126] Update classDiagram.md Fixed typo. --- packages/mermaid/src/docs/syntax/classDiagram.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md index 4b0cd49def..f02ae67be9 100644 --- a/packages/mermaid/src/docs/syntax/classDiagram.md +++ b/packages/mermaid/src/docs/syntax/classDiagram.md @@ -281,8 +281,6 @@ And `Link` can be one of: A namespace groups classes. -Code: - ```mermaid-example classDiagram namespace BaseShapes { From bc247b1d46bc07bba8a01b46e0714022f14b2e6e Mon Sep 17 00:00:00 2001 From: steph <steph@huynhicode.dev> Date: Sun, 22 Oct 2023 14:18:41 -0700 Subject: [PATCH 080/126] add docusaurus to community integrations --- .../interfaces/mermaidAPI.ParseOptions.md | 19 ------------------- docs/ecosystem/integrations-community.md | 1 + .../docs/ecosystem/integrations-community.md | 1 + 3 files changed, 2 insertions(+), 19 deletions(-) delete mode 100644 docs/config/setup/interfaces/mermaidAPI.ParseOptions.md diff --git a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md deleted file mode 100644 index ea390899e4..0000000000 --- a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md +++ /dev/null @@ -1,19 +0,0 @@ -> **Warning** -> -> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. -> -> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md). - -# Interface: ParseOptions - -[mermaidAPI](../modules/mermaidAPI.md).ParseOptions - -## Properties - -### suppressErrors - -• `Optional` **suppressErrors**: `boolean` - -#### Defined in - -[mermaidAPI.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L59) diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index 55629f86e8..702fd77055 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -169,6 +169,7 @@ Communication tools and platforms ### Document Generation +- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅ - [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts) - [Sphinx](https://www.sphinx-doc.org/en/master/) - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid) diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md index ae7e5b71b4..529ba02145 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations-community.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md @@ -167,6 +167,7 @@ Communication tools and platforms ### Document Generation +- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅ - [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts) - [Sphinx](https://www.sphinx-doc.org/en/master/) - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid) From b268bd21e16225ce49cf898fa9c35785c562b539 Mon Sep 17 00:00:00 2001 From: huynhicode <huynhicode@users.noreply.github.com> Date: Sun, 22 Oct 2023 21:23:47 +0000 Subject: [PATCH 081/126] Update docs --- .../interfaces/mermaidAPI.ParseOptions.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 docs/config/setup/interfaces/mermaidAPI.ParseOptions.md diff --git a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md new file mode 100644 index 0000000000..ea390899e4 --- /dev/null +++ b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md @@ -0,0 +1,19 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md). + +# Interface: ParseOptions + +[mermaidAPI](../modules/mermaidAPI.md).ParseOptions + +## Properties + +### suppressErrors + +• `Optional` **suppressErrors**: `boolean` + +#### Defined in + +[mermaidAPI.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L59) From 880d0ebb50fbe7ecb56f31c318eb05c0744dee6b Mon Sep 17 00:00:00 2001 From: Karthik <109301536+karthxk07@users.noreply.github.com> Date: Mon, 23 Oct 2023 11:38:52 +0530 Subject: [PATCH 082/126] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 04747385a2..c391f90504 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia <br/> Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/> -[Tutorials](./docs/config/Tutorials.md) has video tutorials. +[Tutorials](./docs/config/Tutorials.md) have video tutorials. Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md). You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md). From 111e067df50e8a6d38a25b16448c6656faf98dae Mon Sep 17 00:00:00 2001 From: Harshit Anand <harshitanand283@gmail.com> Date: Mon, 23 Oct 2023 12:03:57 +0530 Subject: [PATCH 083/126] fix: added type Element to the node used in callback in the addhook function --- .../mermaid/src/diagrams/common/common.ts | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts index 84db828435..28f243845d 100644 --- a/packages/mermaid/src/diagrams/common/common.ts +++ b/packages/mermaid/src/diagrams/common/common.ts @@ -30,21 +30,21 @@ export const removeScript = (txt: string): string => { const TEMPORARY_ATTRIBUTE = 'data-temp-href-target'; -DOMPurify.addHook('beforeSanitizeAttributes', function (node) { - if (node.tagName === 'A' && node.hasAttribute('target')) { - node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || ''); - } -}); - -DOMPurify.addHook('afterSanitizeAttributes', function (node) { - if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) { - node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || ''); - node.removeAttribute(TEMPORARY_ATTRIBUTE); - if (node.getAttribute('target') === '_blank') { - node.setAttribute('rel', 'noopener'); - } - } -}); +// DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => { +// if (node.tagName === 'A' && node.hasAttribute('target')) { +// node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || ''); +// } +// }); + +// DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => { +// if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) { +// node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || ''); +// node.removeAttribute(TEMPORARY_ATTRIBUTE); +// if (node.getAttribute('target') === '_blank') { +// node.setAttribute('rel', 'noopener'); +// } +// } +// }); const sanitizeMore = (text: string, config: MermaidConfig) => { if (config.flowchart?.htmlLabels !== false) { From 3b8c48dd26bfa16172f3c2c5410bdbaf0b71647f Mon Sep 17 00:00:00 2001 From: Harshit Anand <harshitanand283@gmail.com> Date: Mon, 23 Oct 2023 12:23:08 +0530 Subject: [PATCH 084/126] fix: added type Element to the node used in callback in the dompurify.addhook --- packages/mermaid/src/diagrams/common/common.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts index 84db828435..744c342520 100644 --- a/packages/mermaid/src/diagrams/common/common.ts +++ b/packages/mermaid/src/diagrams/common/common.ts @@ -30,13 +30,13 @@ export const removeScript = (txt: string): string => { const TEMPORARY_ATTRIBUTE = 'data-temp-href-target'; -DOMPurify.addHook('beforeSanitizeAttributes', function (node) { +DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => { if (node.tagName === 'A' && node.hasAttribute('target')) { node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || ''); } }); -DOMPurify.addHook('afterSanitizeAttributes', function (node) { +DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => { if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) { node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || ''); node.removeAttribute(TEMPORARY_ATTRIBUTE); From 7960f94eba2112e3ce54443cce5301991a63f178 Mon Sep 17 00:00:00 2001 From: Harshit Anand <harshitanand283@gmail.com> Date: Mon, 23 Oct 2023 16:09:51 +0530 Subject: [PATCH 085/126] fix: shifted dompurify.addhook functions inside removescript --- .../mermaid/src/diagrams/common/common.ts | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts index 744c342520..caf43bc682 100644 --- a/packages/mermaid/src/diagrams/common/common.ts +++ b/packages/mermaid/src/diagrams/common/common.ts @@ -25,26 +25,28 @@ export const getRows = (s?: string): string[] => { * @returns The safer text */ export const removeScript = (txt: string): string => { - return DOMPurify.sanitize(txt); -}; + const TEMPORARY_ATTRIBUTE = 'data-temp-href-target'; -const TEMPORARY_ATTRIBUTE = 'data-temp-href-target'; + DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => { + if (node.tagName === 'A' && node.hasAttribute('target')) { + node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || ''); + } + }); -DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => { - if (node.tagName === 'A' && node.hasAttribute('target')) { - node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || ''); - } -}); - -DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => { - if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) { - node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || ''); - node.removeAttribute(TEMPORARY_ATTRIBUTE); - if (node.getAttribute('target') === '_blank') { - node.setAttribute('rel', 'noopener'); + const sanitizedText = DOMPurify.sanitize(txt); + + DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => { + if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) { + node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || ''); + node.removeAttribute(TEMPORARY_ATTRIBUTE); + if (node.getAttribute('target') === '_blank') { + node.setAttribute('rel', 'noopener'); + } } - } -}); + }); + + return sanitizedText; +}; const sanitizeMore = (text: string, config: MermaidConfig) => { if (config.flowchart?.htmlLabels !== false) { From ff4d68fd555aec2cc325f1112d9ada2c5c338e48 Mon Sep 17 00:00:00 2001 From: Karthik <109301536+karthxk07@users.noreply.github.com> Date: Wed, 25 Oct 2023 14:11:38 +0530 Subject: [PATCH 086/126] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c391f90504..ab2aeb2e73 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia <br/> Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/> -[Tutorials](./docs/config/Tutorials.md) have video tutorials. +For video tutorials, visit our [Tutorials](./docs/config/Tutorials.md) page. Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md). You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md). From fc28c1da63d68b4989e7f8bc5d81a2f27842e732 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist <knsv@sveido.com> Date: Wed, 25 Oct 2023 11:06:37 +0200 Subject: [PATCH 087/126] Limiting the number of edges that are allowed in the flowchart --- cypress/platform/knsv2.html | 18 ++++++++++++++---- .../mermaid/src/diagrams/flowchart/flowDb.js | 11 ++++++++++- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 13094644bd..020ea8b482 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -58,10 +58,19 @@ </head> <body> <pre id="diagram" class="mermaid"> -flowchart-elk LR - subgraph example - node - end +flowchart TB + C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z & A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8 + ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> + C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z & A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8 + + </pre> + <pre id="diagram" class="mermaid2"> + flowchart TB + A & A & A & A & A & A & A & A ---> C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z + </pre> + <pre id="diagram" class="mermaid2"> + flowchart TB + A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8 --> C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z </pre> <pre id="diagram" class="mermaid2"> flowchart @@ -441,6 +450,7 @@ messageFontFamily: 'courier', }, fontSize: 16, + logLevel: 0, }); function callback() { alert('It worked'); diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index 510c40ce84..9a9394e543 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -12,6 +12,7 @@ import { setDiagramTitle, getDiagramTitle, } from '../common/commonDb.js'; +import errorDiagram from '../error/errorDiagram.js'; const MERMAID_DOM_ID_PREFIX = 'flowchart-'; let vertexCounter = 0; @@ -156,7 +157,15 @@ export const addSingleLink = function (_start, _end, type) { edge.stroke = type.stroke; edge.length = type.length; } - edges.push(edge); + if (edge?.length > 10) { + edge.length = 10; + } + if (edges.length < 280) { + log.info('abc78 pushing edge...'); + edges.push(edge); + } else { + throw new Error('Too many edges'); + } }; export const addLink = function (_start, _end, type) { log.info('addLink (abc78)', _start, _end, type); From 29942c04dc92a64f8c618d6d55f9b57800341cf5 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist <knsv@sveido.com> Date: Wed, 25 Oct 2023 11:07:12 +0200 Subject: [PATCH 088/126] Updated mermaid version --- package.json | 2 +- packages/mermaid/package.json | 2 +- pnpm-lock.yaml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index ee0c01413c..76ffc7c5a9 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,7 @@ "cypress": "^12.10.0", "cypress-image-snapshot": "^4.0.1", "esbuild": "^0.19.0", - "eslint": "^8.39.0", + "eslint": "^8.47.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-cypress": "^2.13.2", "eslint-plugin-html": "^7.1.0", diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index cf2bacf3a3..7d218d4aa6 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "10.5.1", + "version": "10.6.0", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2fab1d4a01..a43411342d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -90,7 +90,7 @@ importers: specifier: ^0.19.0 version: 0.19.0 eslint: - specifier: ^8.39.0 + specifier: ^8.47.0 version: 8.47.0 eslint-config-prettier: specifier: ^8.8.0 From 06d2ba8398ec79598a7d6333c1527402c0e7a5de Mon Sep 17 00:00:00 2001 From: Harshit Anand <harshitanand283@gmail.com> Date: Wed, 25 Oct 2023 21:17:53 +0530 Subject: [PATCH 089/126] fix: added two unit tests to check for the secured anchor tag --- .../mermaid/src/diagrams/common/common.spec.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/mermaid/src/diagrams/common/common.spec.ts b/packages/mermaid/src/diagrams/common/common.spec.ts index 4dac5b33c1..9af2444061 100644 --- a/packages/mermaid/src/diagrams/common/common.spec.ts +++ b/packages/mermaid/src/diagrams/common/common.spec.ts @@ -38,6 +38,20 @@ describe('when securityLevel is antiscript, all script must be removed', () => { compareRemoveScript(`<img onerror="alert('hello');">`, `<img>`); }); + it('should detect unsecured target attribute, if value is _blank then generate a secured link', () => { + compareRemoveScript( + `<a href="https://mermaid.js.org/" target="_blank">note about mermaid</a>`, + `<a href="https://mermaid.js.org/" target="_blank" rel="noopener">note about mermaid</a>` + ); + }); + + it('should detect unsecured target attribute from links', () => { + compareRemoveScript( + `<a href="https://mermaid.js.org/" target="_self">note about mermaid</a>`, + `<a href="https://mermaid.js.org/" target="_self">note about mermaid</a>` + ); + }); + it('should detect iframes', () => { compareRemoveScript( `<iframe src="http://abc.com/script1.js"></iframe> From 54ab3fc3b2dc7f4be13c6f18592ec61662f9c171 Mon Sep 17 00:00:00 2001 From: Harshit Anand <harshitanand283@gmail.com> Date: Thu, 26 Oct 2023 14:55:04 +0530 Subject: [PATCH 090/126] fix: added an e2e test case for classdiagram with anchor tag --- cypress/integration/rendering/classDiagram.spec.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index a23430b083..cab3649df4 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -501,4 +501,16 @@ describe('Class diagram', () => { B : -methods() `); }); + + it('should handle notes with anchor tag having target attribute', () => { + renderGraph( + `classDiagram + class test { } + note for test "<a href='https://mermaid.js.org/' target="_blank"><code>note about mermaid</code></a>"` + ); + + cy.get('svg').then((svg) => { + cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener'); + }); + }); }); From 672a0edc59e0be4fbb7422535435dd7278647721 Mon Sep 17 00:00:00 2001 From: SADIK KUZU <sadikkuzu@hotmail.com> Date: Fri, 27 Oct 2023 12:22:14 +0300 Subject: [PATCH 091/126] Fix typo in build-docs.yml --- .github/workflows/build-docs.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml index 152b177ae9..6fc629c7ae 100644 --- a/.github/workflows/build-docs.yml +++ b/.github/workflows/build-docs.yml @@ -29,7 +29,7 @@ jobs: - name: Install Packages run: pnpm install --frozen-lockfile - - name: Verify release verion + - name: Verify release version if: ${{ github.event_name == 'push' && (github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/heads/release')) }} run: pnpm --filter mermaid run docs:verify-version From e98aa5557713e4dfe02cf6a0dbcdf5589d220de0 Mon Sep 17 00:00:00 2001 From: Alex Titarenko <alx.titarenko@gmail.com> Date: Fri, 27 Oct 2023 18:58:30 -0700 Subject: [PATCH 092/126] docs: upate the list of tools with native support of mermaid --- packages/mermaid/src/docs/ecosystem/integrations-community.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md index ae7e5b71b4..9e047bfe3d 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations-community.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md @@ -33,6 +33,7 @@ Below are a list of community plugins and integrations created with Mermaid. - [Notion](https://notion.so) ✅ - [Observable](https://observablehq.com/@observablehq/mermaid) ✅ - [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅ +- [NotesHub](https://noteshub.app) ✅ - [GitBook](https://gitbook.com) - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid) - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli) From cb06962c8502b7078bd36e0658209448c5b723a4 Mon Sep 17 00:00:00 2001 From: Alex Titarenko <alx.titarenko@gmail.com> Date: Fri, 27 Oct 2023 20:27:16 -0700 Subject: [PATCH 093/126] Update integrations-community.md --- docs/ecosystem/integrations-community.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index 55629f86e8..77185b649a 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -35,6 +35,7 @@ Below are a list of community plugins and integrations created with Mermaid. - [Notion](https://notion.so) ✅ - [Observable](https://observablehq.com/@observablehq/mermaid) ✅ - [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅ +- [NotesHub](https://noteshub.app) ✅ - [GitBook](https://gitbook.com) - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid) - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli) From e8a04faa36033d97416339bd0b31932c5a9d32c2 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 31 Oct 2023 06:13:41 +0000 Subject: [PATCH 094/126] chore(deps): update all patch dependencies --- packages/mermaid/src/docs/package.json | 2 +- pnpm-lock.yaml | 270 ++++++++++++++++++++----- 2 files changed, 226 insertions(+), 46 deletions(-) diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index a7ec3312aa..e6fb6a0fa4 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -32,7 +32,7 @@ "unplugin-vue-components": "^0.25.0", "vite": "^4.3.9", "vite-plugin-pwa": "^0.16.0", - "vitepress": "1.0.0-rc.22", + "vitepress": "1.0.0-rc.24", "workbox-window": "^7.0.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a43411342d..4d1cc83a98 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -475,8 +475,8 @@ importers: specifier: ^0.16.0 version: 0.16.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0) vitepress: - specifier: 1.0.0-rc.22 - version: 1.0.0-rc.22(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0) + specifier: 1.0.0-rc.24 + version: 1.0.0-rc.24(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0)(typescript@5.1.6) workbox-window: specifier: ^7.0.0 version: 7.0.0 @@ -1084,10 +1084,10 @@ packages: '@babel/helper-compilation-targets': 7.22.10 '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.10) '@babel/helpers': 7.22.10 - '@babel/parser': 7.22.10 + '@babel/parser': 7.23.0 '@babel/template': 7.22.5 '@babel/traverse': 7.23.2 - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 convert-source-map: 1.9.0 debug: 4.3.4(supports-color@8.1.1) gensync: 1.0.0-beta.2 @@ -1101,7 +1101,7 @@ packages: resolution: {integrity: sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 '@jridgewell/gen-mapping': 0.3.3 '@jridgewell/trace-mapping': 0.3.19 jsesc: 2.5.2 @@ -1223,7 +1223,7 @@ packages: resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@babel/helper-module-transforms@7.22.9(@babel/core@7.22.10): @@ -1237,7 +1237,7 @@ packages: '@babel/helper-module-imports': 7.22.5 '@babel/helper-simple-access': 7.22.5 '@babel/helper-split-export-declaration': 7.22.6 - '@babel/helper-validator-identifier': 7.22.5 + '@babel/helper-validator-identifier': 7.22.20 dev: true /@babel/helper-optimise-call-expression@7.22.5: @@ -1280,7 +1280,7 @@ packages: resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@babel/helper-skip-transparent-expression-wrappers@7.22.5: @@ -1330,7 +1330,7 @@ packages: dependencies: '@babel/template': 7.22.5 '@babel/traverse': 7.23.2 - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 transitivePeerDependencies: - supports-color dev: true @@ -1339,7 +1339,7 @@ packages: resolution: {integrity: sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/helper-validator-identifier': 7.22.5 + '@babel/helper-validator-identifier': 7.22.20 chalk: 2.4.2 js-tokens: 4.0.0 dev: true @@ -2256,8 +2256,8 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/code-frame': 7.22.10 - '@babel/parser': 7.22.10 - '@babel/types': 7.22.10 + '@babel/parser': 7.23.0 + '@babel/types': 7.23.0 dev: true /@babel/traverse@7.23.2: @@ -4036,8 +4036,8 @@ packages: /@types/babel__core@7.20.1: resolution: {integrity: sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==} dependencies: - '@babel/parser': 7.22.10 - '@babel/types': 7.22.10 + '@babel/parser': 7.23.0 + '@babel/types': 7.23.0 '@types/babel__generator': 7.6.4 '@types/babel__template': 7.4.1 '@types/babel__traverse': 7.20.1 @@ -4046,20 +4046,20 @@ packages: /@types/babel__generator@7.6.4: resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@types/babel__template@7.4.1: resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==} dependencies: - '@babel/parser': 7.22.10 - '@babel/types': 7.22.10 + '@babel/parser': 7.23.0 + '@babel/types': 7.23.0 dev: true /@types/babel__traverse@7.20.1: resolution: {integrity: sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@types/body-parser@1.19.2: @@ -4458,8 +4458,8 @@ packages: '@types/mdurl': 1.0.2 dev: true - /@types/markdown-it@13.0.2: - resolution: {integrity: sha512-Tla7hH9oeXHOlJyBFdoqV61xWE9FZf/y2g+gFVwQ2vE1/eBzjUno5JCd3Hdb5oATve5OF6xNjZ/4VIZhVVx+hA==} + /@types/markdown-it@13.0.5: + resolution: {integrity: sha512-QhJP7hkq3FCrFNx0szMNCT/79CXfcEgUIA3jc5GBfeXqoKsk3R8JZm2wRXJ2DiyjbPE4VMFOSDemLFcUTZmHEQ==} dependencies: '@types/linkify-it': 3.0.2 '@types/mdurl': 1.0.2 @@ -5212,6 +5212,17 @@ packages: vue: 3.3.4 dev: true + /@vitejs/plugin-vue@4.3.1(vite@4.5.0)(vue@3.3.7): + resolution: {integrity: sha512-tUBEtWcF7wFtII7ayNiLNDTCE1X1afySEo+XNVMNkFXaThENyCowIEX095QqbJZGTgoOcSVDJGlnde2NG4jtbQ==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + vite: ^4.0.0 + vue: ^3.2.25 + dependencies: + vite: 4.5.0(@types/node@18.17.5) + vue: 3.3.7(typescript@5.1.6) + dev: true + /@vitest/coverage-v8@0.34.0(vitest@0.34.0): resolution: {integrity: sha512-rUFY9xX6nnrFvVfTDjlEaOFzfHqolUoA+Unz356T38W100QA+NiaekCFq/3XB/LXBISaFreCsVjAbPV3hjV7Jg==} peerDependencies: @@ -5252,7 +5263,7 @@ packages: /@vitest/snapshot@0.34.0: resolution: {integrity: sha512-eGN5XBZHYOghxCOQbf8dcn6/3g7IW77GOOOC/mNFYwRXsPeoQgcgWnhj+6wgJ04pVv25wpxWL9jUkzaQ7LoFtg==} dependencies: - magic-string: 0.30.2 + magic-string: 0.30.4 pathe: 1.1.1 pretty-format: 29.6.2 dev: true @@ -5305,12 +5316,28 @@ packages: estree-walker: 2.0.2 source-map-js: 1.0.2 + /@vue/compiler-core@3.3.7: + resolution: {integrity: sha512-pACdY6YnTNVLXsB86YD8OF9ihwpolzhhtdLVHhBL6do/ykr6kKXNYABRtNMGrsQXpEXXyAdwvWWkuTbs4MFtPQ==} + dependencies: + '@babel/parser': 7.23.0 + '@vue/shared': 3.3.7 + estree-walker: 2.0.2 + source-map-js: 1.0.2 + dev: true + /@vue/compiler-dom@3.3.4: resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==} dependencies: '@vue/compiler-core': 3.3.4 '@vue/shared': 3.3.4 + /@vue/compiler-dom@3.3.7: + resolution: {integrity: sha512-0LwkyJjnUPssXv/d1vNJ0PKfBlDoQs7n81CbO6Q0zdL7H1EzqYRrTVXDqdBVqro0aJjo/FOa1qBAPVI4PGSHBw==} + dependencies: + '@vue/compiler-core': 3.3.7 + '@vue/shared': 3.3.7 + dev: true + /@vue/compiler-sfc@3.3.4: resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==} dependencies: @@ -5325,18 +5352,40 @@ packages: postcss: 8.4.27 source-map-js: 1.0.2 + /@vue/compiler-sfc@3.3.7: + resolution: {integrity: sha512-7pfldWy/J75U/ZyYIXRVqvLRw3vmfxDo2YLMwVtWVNew8Sm8d6wodM+OYFq4ll/UxfqVr0XKiVwti32PCrruAw==} + dependencies: + '@babel/parser': 7.23.0 + '@vue/compiler-core': 3.3.7 + '@vue/compiler-dom': 3.3.7 + '@vue/compiler-ssr': 3.3.7 + '@vue/reactivity-transform': 3.3.7 + '@vue/shared': 3.3.7 + estree-walker: 2.0.2 + magic-string: 0.30.5 + postcss: 8.4.31 + source-map-js: 1.0.2 + dev: true + /@vue/compiler-ssr@3.3.4: resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==} dependencies: '@vue/compiler-dom': 3.3.4 '@vue/shared': 3.3.4 + /@vue/compiler-ssr@3.3.7: + resolution: {integrity: sha512-TxOfNVVeH3zgBc82kcUv+emNHo+vKnlRrkv8YvQU5+Y5LJGJwSNzcmLUoxD/dNzv0bhQ/F0s+InlgV0NrApJZg==} + dependencies: + '@vue/compiler-dom': 3.3.7 + '@vue/shared': 3.3.7 + dev: true + /@vue/devtools-api@6.5.0: resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==} + dev: true /@vue/devtools-api@6.5.1: resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==} - dev: true /@vue/reactivity-transform@3.3.4: resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==} @@ -5347,17 +5396,40 @@ packages: estree-walker: 2.0.2 magic-string: 0.30.2 + /@vue/reactivity-transform@3.3.7: + resolution: {integrity: sha512-APhRmLVbgE1VPGtoLQoWBJEaQk4V8JUsqrQihImVqKT+8U6Qi3t5ATcg4Y9wGAPb3kIhetpufyZ1RhwbZCIdDA==} + dependencies: + '@babel/parser': 7.23.0 + '@vue/compiler-core': 3.3.7 + '@vue/shared': 3.3.7 + estree-walker: 2.0.2 + magic-string: 0.30.5 + dev: true + /@vue/reactivity@3.3.4: resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==} dependencies: '@vue/shared': 3.3.4 + /@vue/reactivity@3.3.7: + resolution: {integrity: sha512-cZNVjWiw00708WqT0zRpyAgduG79dScKEPYJXq2xj/aMtk3SKvL3FBt2QKUlh6EHBJ1m8RhBY+ikBUzwc7/khg==} + dependencies: + '@vue/shared': 3.3.7 + dev: true + /@vue/runtime-core@3.3.4: resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==} dependencies: '@vue/reactivity': 3.3.4 '@vue/shared': 3.3.4 + /@vue/runtime-core@3.3.7: + resolution: {integrity: sha512-LHq9du3ubLZFdK/BP0Ysy3zhHqRfBn80Uc+T5Hz3maFJBGhci1MafccnL3rpd5/3wVfRHAe6c+PnlO2PAavPTQ==} + dependencies: + '@vue/reactivity': 3.3.7 + '@vue/shared': 3.3.7 + dev: true + /@vue/runtime-dom@3.3.4: resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==} dependencies: @@ -5365,6 +5437,14 @@ packages: '@vue/shared': 3.3.4 csstype: 3.1.2 + /@vue/runtime-dom@3.3.7: + resolution: {integrity: sha512-PFQU1oeJxikdDmrfoNQay5nD4tcPNYixUBruZzVX/l0eyZvFKElZUjW4KctCcs52nnpMGO6UDK+jF5oV4GT5Lw==} + dependencies: + '@vue/runtime-core': 3.3.7 + '@vue/shared': 3.3.7 + csstype: 3.1.2 + dev: true + /@vue/server-renderer@3.3.4(vue@3.3.4): resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==} peerDependencies: @@ -5374,9 +5454,23 @@ packages: '@vue/shared': 3.3.4 vue: 3.3.4 + /@vue/server-renderer@3.3.7(vue@3.3.7): + resolution: {integrity: sha512-UlpKDInd1hIZiNuVVVvLgxpfnSouxKQOSE2bOfQpBuGwxRV/JqqTCyyjXUWiwtVMyeRaZhOYYqntxElk8FhBhw==} + peerDependencies: + vue: 3.3.7 + dependencies: + '@vue/compiler-ssr': 3.3.7 + '@vue/shared': 3.3.7 + vue: 3.3.7(typescript@5.1.6) + dev: true + /@vue/shared@3.3.4: resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==} + /@vue/shared@3.3.7: + resolution: {integrity: sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==} + dev: true + /@vueuse/core@10.1.0(vue@3.3.4): resolution: {integrity: sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==} dependencies: @@ -5395,25 +5489,25 @@ packages: '@types/web-bluetooth': 0.0.17 '@vueuse/metadata': 10.3.0 '@vueuse/shared': 10.3.0(vue@3.3.4) - vue-demi: 0.14.5(vue@3.3.4) + vue-demi: 0.14.6(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue dev: true - /@vueuse/core@10.5.0(vue@3.3.4): + /@vueuse/core@10.5.0(vue@3.3.7): resolution: {integrity: sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==} dependencies: '@types/web-bluetooth': 0.0.18 '@vueuse/metadata': 10.5.0 - '@vueuse/shared': 10.5.0(vue@3.3.4) - vue-demi: 0.14.6(vue@3.3.4) + '@vueuse/shared': 10.5.0(vue@3.3.7) + vue-demi: 0.14.6(vue@3.3.7) transitivePeerDependencies: - '@vue/composition-api' - vue dev: true - /@vueuse/integrations@10.5.0(focus-trap@7.5.4)(vue@3.3.4): + /@vueuse/integrations@10.5.0(focus-trap@7.5.4)(vue@3.3.7): resolution: {integrity: sha512-fm5sXLCK0Ww3rRnzqnCQRmfjDURaI4xMsx+T+cec0ngQqHx/JgUtm8G0vRjwtonIeTBsH1Q8L3SucE+7K7upJQ==} peerDependencies: async-validator: '*' @@ -5454,10 +5548,10 @@ packages: universal-cookie: optional: true dependencies: - '@vueuse/core': 10.5.0(vue@3.3.4) - '@vueuse/shared': 10.5.0(vue@3.3.4) + '@vueuse/core': 10.5.0(vue@3.3.7) + '@vueuse/shared': 10.5.0(vue@3.3.7) focus-trap: 7.5.4 - vue-demi: 0.14.6(vue@3.3.4) + vue-demi: 0.14.6(vue@3.3.7) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -5487,16 +5581,16 @@ packages: /@vueuse/shared@10.3.0(vue@3.3.4): resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==} dependencies: - vue-demi: 0.14.5(vue@3.3.4) + vue-demi: 0.14.6(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue dev: true - /@vueuse/shared@10.5.0(vue@3.3.4): + /@vueuse/shared@10.5.0(vue@3.3.7): resolution: {integrity: sha512-18iyxbbHYLst9MqU1X1QNdMHIjks6wC7XTVf0KNOv5es/Ms6gjVFCAAWTVP2JStuGqydg3DT+ExpFORUEi9yhg==} dependencies: - vue-demi: 0.14.6(vue@3.3.4) + vue-demi: 0.14.6(vue@3.3.7) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -6222,7 +6316,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@babel/template': 7.22.5 - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 '@types/babel__core': 7.20.1 '@types/babel__traverse': 7.20.1 dev: true @@ -10558,7 +10652,7 @@ packages: engines: {node: '>=8'} dependencies: '@babel/core': 7.22.10 - '@babel/parser': 7.22.10 + '@babel/parser': 7.23.0 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.0 semver: 6.3.1 @@ -10974,7 +11068,7 @@ packages: '@babel/generator': 7.22.10 '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.10) '@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.22.10) - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 '@jest/expect-utils': 29.6.2 '@jest/transform': 29.6.2 '@jest/types': 29.6.1 @@ -11706,6 +11800,13 @@ packages: '@jridgewell/sourcemap-codec': 1.4.15 dev: true + /magic-string@0.30.5: + resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==} + engines: {node: '>=12'} + dependencies: + '@jridgewell/sourcemap-codec': 1.4.15 + dev: true + /make-dir@3.1.0: resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==} engines: {node: '>=8'} @@ -13223,6 +13324,15 @@ packages: picocolors: 1.0.0 source-map-js: 1.0.2 + /postcss@8.4.31: + resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==} + engines: {node: ^10 || ^12 || >=14} + dependencies: + nanoid: 3.3.6 + picocolors: 1.0.0 + source-map-js: 1.0.2 + dev: true + /preact@10.16.0: resolution: {integrity: sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA==} dev: true @@ -15555,7 +15665,7 @@ packages: mlly: 1.4.0 pathe: 1.1.1 picocolors: 1.0.0 - vite: 4.4.9(@types/node@18.17.5) + vite: 4.4.11(@types/node@18.17.5) transitivePeerDependencies: - '@types/node' - less @@ -15671,6 +15781,42 @@ packages: fsevents: 2.3.2 dev: true + /vite@4.5.0(@types/node@18.17.5): + resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + '@types/node': 18.17.5 + esbuild: 0.18.20 + postcss: 8.4.27 + rollup: 3.28.0 + optionalDependencies: + fsevents: 2.3.2 + dev: true + /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.4): resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==} engines: {node: ^14.13.1 || ^16.7.0 || >=18} @@ -15719,8 +15865,8 @@ packages: - terser dev: true - /vitepress@1.0.0-rc.22(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0): - resolution: {integrity: sha512-n7le5iikCFgWMuX7sKfzDGJGlrsYQ5trG3S97BghNz2alOTr4Xp+GrB6ShwogUTX9gNgeNmrACjokhW55LNeBA==} + /vitepress@1.0.0-rc.24(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0)(typescript@5.1.6): + resolution: {integrity: sha512-RpnL8cnOGwiRlBbrYQUm9sYkJbtyOt/wYXk2diTcokY4yvks/5lq9LuSt+MURWB6ZqwpSNHvTmxgaSfLoG0/OA==} hasBin: true peerDependencies: markdown-it-mathjax3: ^4.3.2 @@ -15733,17 +15879,18 @@ packages: dependencies: '@docsearch/css': 3.5.2 '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0) - '@types/markdown-it': 13.0.2 + '@types/markdown-it': 13.0.5 + '@vitejs/plugin-vue': 4.3.1(vite@4.5.0)(vue@3.3.7) '@vue/devtools-api': 6.5.1 - '@vueuse/core': 10.5.0(vue@3.3.4) - '@vueuse/integrations': 10.5.0(focus-trap@7.5.4)(vue@3.3.4) + '@vueuse/core': 10.5.0(vue@3.3.7) + '@vueuse/integrations': 10.5.0(focus-trap@7.5.4)(vue@3.3.7) focus-trap: 7.5.4 mark.js: 8.11.1 minisearch: 6.1.0 postcss: 8.4.27 shiki: 0.14.5 - vite: 4.4.11(@types/node@18.17.5) - vue: 3.3.4 + vite: 4.5.0(@types/node@18.17.5) + vue: 3.3.7(typescript@5.1.6) transitivePeerDependencies: - '@algolia/client-search' - '@types/node' @@ -15768,6 +15915,7 @@ packages: - stylus - sugarss - terser + - typescript - universal-cookie dev: true @@ -15885,6 +16033,7 @@ packages: optional: true dependencies: vue: 3.3.4 + dev: false /vue-demi@0.14.6(vue@3.3.4): resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==} @@ -15901,6 +16050,21 @@ packages: vue: 3.3.4 dev: true + /vue-demi@0.14.6(vue@3.3.7): + resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + peerDependencies: + '@vue/composition-api': ^1.0.0-rc.1 + vue: ^3.0.0-0 || ^2.6.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + dependencies: + vue: 3.3.7(typescript@5.1.6) + dev: true + /vue@3.3.4: resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==} dependencies: @@ -15910,12 +16074,28 @@ packages: '@vue/server-renderer': 3.3.4(vue@3.3.4) '@vue/shared': 3.3.4 + /vue@3.3.7(typescript@5.1.6): + resolution: {integrity: sha512-YEMDia1ZTv1TeBbnu6VybatmSteGOS3A3YgfINOfraCbf85wdKHzscD6HSS/vB4GAtI7sa1XPX7HcQaJ1l24zA==} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@vue/compiler-dom': 3.3.7 + '@vue/compiler-sfc': 3.3.7 + '@vue/runtime-dom': 3.3.7 + '@vue/server-renderer': 3.3.7(vue@3.3.7) + '@vue/shared': 3.3.7 + typescript: 5.1.6 + dev: true + /vuex@4.1.0(vue@3.3.4): resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==} peerDependencies: vue: ^3.2.0 dependencies: - '@vue/devtools-api': 6.5.0 + '@vue/devtools-api': 6.5.1 vue: 3.3.4 dev: false From 8f2a5064cb66b304eb36254b89b0ddd6ae4ba271 Mon Sep 17 00:00:00 2001 From: Sebastian Holmqvist <1297882+csholmq@users.noreply.github.com> Date: Thu, 19 Oct 2023 17:01:43 +0200 Subject: [PATCH 095/126] fix(tooltip): remove redundant scroll offset window.scrollY is already account for which means document.body.scrollTop incorrectly offsets the tooltip vertically. The same is not true for horizontal position. --- packages/mermaid/src/diagrams/flowchart/flowDb.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index 9a9394e543..501479239b 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -425,7 +425,7 @@ const setupToolTips = function (element) { tooltipElem .text(el.attr('title')) .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px') - .style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px'); + .style('top', window.scrollY + rect.top - 14 + 'px'); tooltipElem.html(tooltipElem.html().replace(/<br\/>/g, '<br/>')); el.classed('hover', true); }) From a3ee21d7fc16c47315d2fa071344eaa6be2f1223 Mon Sep 17 00:00:00 2001 From: Sebastian Holmqvist <1297882+csholmq@users.noreply.github.com> Date: Fri, 20 Oct 2023 08:39:42 +0200 Subject: [PATCH 096/126] fix(tooltip): change position of tooltip to not cover node Position the tooltip centered, just below the node being hovered. Update packages/mermaid/src/diagrams/flowchart/flowDb.js Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com> --- packages/mermaid/src/diagrams/flowchart/flowDb.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index 501479239b..f224c9bace 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -425,7 +425,7 @@ const setupToolTips = function (element) { tooltipElem .text(el.attr('title')) .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px') - .style('top', window.scrollY + rect.top - 14 + 'px'); + .style('top', window.scrollY + rect.bottom + 'px'); tooltipElem.html(tooltipElem.html().replace(/<br\/>/g, '<br/>')); el.classed('hover', true); }) From 390e22cc0b13c809ef790e3054e0ea1f384fed19 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi <aakansha1216@gmail.com> Date: Tue, 31 Oct 2023 18:28:45 +0530 Subject: [PATCH 097/126] fix: getMessageAPI so it considers entity codes --- packages/mermaid/src/Diagram.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts index b77091f28c..4fc12d1036 100644 --- a/packages/mermaid/src/Diagram.ts +++ b/packages/mermaid/src/Diagram.ts @@ -5,6 +5,7 @@ import { detectType, getDiagramLoader } from './diagram-api/detectType.js'; import { UnknownDiagramError } from './errors.js'; import type { DetailedError } from './utils.js'; import type { DiagramDefinition, DiagramMetadata } from './diagram-api/types.js'; +import { encodeEntities } from './mermaidAPI.js'; export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void; @@ -81,6 +82,8 @@ export const getDiagramFromText = async ( text: string, metadata: Pick<DiagramMetadata, 'title'> = {} ): Promise<Diagram> => { + text = encodeEntities(text); + const type = detectType(text, configApi.getConfig()); try { // Trying to find the diagram From fff25e7e2cec66e432756ec742ad8e6bbb864762 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi <aakansha1216@gmail.com> Date: Tue, 31 Oct 2023 19:32:20 +0530 Subject: [PATCH 098/126] add spec --- packages/mermaid/src/diagram-api/types.ts | 9 +++++++++ packages/mermaid/src/diagram.spec.ts | 14 ++++++++++++++ packages/mermaid/src/mermaidAPI.ts | 2 -- 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts index 58d98107ea..232550b4f0 100644 --- a/packages/mermaid/src/diagram-api/types.ts +++ b/packages/mermaid/src/diagram-api/types.ts @@ -19,6 +19,14 @@ export interface InjectUtils { _parseDirective: any; } +export type Message = { + type: number; + to: string; + from: string; + message: string; + wrap: boolean; +}; + /** * Generic Diagram DB that may apply to any diagram type. */ @@ -37,6 +45,7 @@ export interface DiagramDB { setDisplayMode?: (title: string) => void; bindFunctions?: (element: Element) => void; + getMessages?: () => Message[]; } // This is what is returned from getClasses(...) methods. diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts index 19a65b716b..4e3c4884d1 100644 --- a/packages/mermaid/src/diagram.spec.ts +++ b/packages/mermaid/src/diagram.spec.ts @@ -69,4 +69,18 @@ Expecting 'TXT', got 'NEWLINE'" '"No diagram type detected matching given configuration for text: thor TD; A-->B"' ); }); + + test('should consider entity codes when present in diagram defination', async () => { + const diagram = await getDiagramFromText(`sequenceDiagram + A->>B: I #9829; you! + B->>A: I #9829; you #infin; times more!`); + const messages = diagram.db?.getMessages?.(); + if (!messages) { + throw new Error('Messages not found!'); + } + const result = ['I fl°°9829¶ß you!', 'I fl°°9829¶ß you fl°infin¶ß times more!']; + messages.forEach((message, index: number) => { + expect(message.message).toBe(result[index]); + }); + }); }); diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 5250f0b190..9637eca002 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -436,8 +436,6 @@ const render = async function ( appendDivSvgG(root, id, enclosingDivID); } - text = encodeEntities(text); - // ------------------------------------------------------------------------------- // Create the diagram From 0c5cf7223586750d94db24ff18d24bb02a1fbef5 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Wed, 1 Nov 2023 20:18:49 +0530 Subject: [PATCH 099/126] chore: Point to correct changelog --- packages/mermaid/src/docs/.vitepress/config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 040a669133..ab1d0f7aa6 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -91,7 +91,7 @@ function nav() { items: [ { text: 'Changelog', - link: 'https://github.com/mermaid-js/mermaid/blob/develop/CHANGELOG.md', + link: 'https://github.com/mermaid-js/mermaid/releases', }, { text: 'Contributing', From 0d4faef758eea1e7171ee69eb7e45ce50b79026a Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 1 Nov 2023 19:42:28 +0000 Subject: [PATCH 100/126] chore(deps): update all minor dependencies --- package.json | 2 +- packages/mermaid/src/docs/package.json | 4 +- pnpm-lock.yaml | 309 ++++++++++++++----------- 3 files changed, 176 insertions(+), 139 deletions(-) diff --git a/package.json b/package.json index 76ffc7c5a9..098e91c30d 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "10.2.4", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", - "packageManager": "pnpm@8.9.2", + "packageManager": "pnpm@8.10.2", "keywords": [ "diagram", "markdown", diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index e6fb6a0fa4..1845b02c29 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -22,13 +22,13 @@ }, "devDependencies": { "@iconify-json/carbon": "^1.1.16", - "@unocss/reset": "^0.56.0", + "@unocss/reset": "^0.57.0", "@vite-pwa/vitepress": "^0.2.0", "@vitejs/plugin-vue": "^4.2.1", "fast-glob": "^3.2.12", "https-localhost": "^4.7.1", "pathe": "^1.1.0", - "unocss": "^0.56.0", + "unocss": "^0.57.0", "unplugin-vue-components": "^0.25.0", "vite": "^4.3.9", "vite-plugin-pwa": "^0.16.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4d1cc83a98..c95afd6f56 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -377,7 +377,7 @@ importers: version: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0) vitepress-plugin-search: specifier: ^1.0.4-alpha.20 - version: 1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.4) + version: 1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.7) packages/mermaid-example-diagram: dependencies: @@ -445,8 +445,8 @@ importers: specifier: ^1.1.16 version: 1.1.16 '@unocss/reset': - specifier: ^0.56.0 - version: 0.56.0 + specifier: ^0.57.0 + version: 0.57.1 '@vite-pwa/vitepress': specifier: ^0.2.0 version: 0.2.0(vite-plugin-pwa@0.16.0) @@ -463,8 +463,8 @@ importers: specifier: ^1.1.0 version: 1.1.0 unocss: - specifier: ^0.56.0 - version: 0.56.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.4.9) + specifier: ^0.57.0 + version: 0.57.1(postcss@8.4.31)(rollup@2.79.1)(vite@4.4.9) unplugin-vue-components: specifier: ^0.25.0 version: 0.25.0(rollup@2.79.1)(vue@3.3.4) @@ -476,7 +476,7 @@ importers: version: 0.16.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0) vitepress: specifier: 1.0.0-rc.24 - version: 1.0.0-rc.24(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0)(typescript@5.1.6) + version: 1.0.0-rc.24(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6) workbox-window: specifier: ^7.0.0 version: 7.0.0 @@ -702,6 +702,10 @@ packages: resolution: {integrity: sha512-dlR6LdS+0SzOAPx/TPRhnoi7hE251OVeT2Snw0RguNbBSbjUHdWr0l3vcUUDg26rEysT89kCbtw1lVorBXLLCg==} dev: true + /@antfu/utils@0.7.6: + resolution: {integrity: sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==} + dev: true + /@apideck/better-ajv-errors@0.3.6(ajv@8.12.0): resolution: {integrity: sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==} engines: {node: '>=10'} @@ -3946,11 +3950,11 @@ packages: rollup: 2.79.1 dev: true - /@rollup/pluginutils@5.0.4(rollup@2.79.1): - resolution: {integrity: sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==} + /@rollup/pluginutils@5.0.5(rollup@2.79.1): + resolution: {integrity: sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==} engines: {node: '>=14.0.0'} peerDependencies: - rollup: ^1.20.0||^2.0.0||^3.0.0 + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 peerDependenciesMeta: rollup: optional: true @@ -4976,207 +4980,209 @@ packages: eslint-visitor-keys: 3.4.3 dev: true - /@unocss/astro@0.56.0(rollup@2.79.1)(vite@4.4.9): - resolution: {integrity: sha512-yBkpp2vc/dH6AiLAZrHC+trpR16VN4SiMVPgiy/UREj9BHJXVwFxFscjqXnuNP1vaxmVEfcvTkph9nJf/+JFjQ==} + /@unocss/astro@0.57.1(rollup@2.79.1)(vite@4.4.9): + resolution: {integrity: sha512-KNaqN/SGM/uz1QitajIkzNEw0jy9Zx9Wp8fl4GhfGYEMAN2+M4cuvBZRmlb6cLctSXmSAJQDG91ivbD1JijGnw==} peerDependencies: vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 peerDependenciesMeta: vite: optional: true dependencies: - '@unocss/core': 0.56.0 - '@unocss/reset': 0.56.0 - '@unocss/vite': 0.56.0(rollup@2.79.1)(vite@4.4.9) + '@unocss/core': 0.57.1 + '@unocss/reset': 0.57.1 + '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.4.9) vite: 4.4.9(@types/node@18.17.5) transitivePeerDependencies: - rollup dev: true - /@unocss/cli@0.56.0(rollup@2.79.1): - resolution: {integrity: sha512-+SD7Pd6xTHj4lW5vZXtebLnCAdhyjrNWsfBHK8exjZF6PVbJWW3wfZ1cBPqveWvS8/1kqsMp2I3GFORKjBiFoQ==} + /@unocss/cli@0.57.1(rollup@2.79.1): + resolution: {integrity: sha512-wKuOaygrPNzDm5L7+2SfHsIi3knJrAQ8nH6OasVqB+bGDz6ybDlULV7wvUco6Os72ydh7YbWC2/WpqFii8U/3w==} engines: {node: '>=14'} hasBin: true dependencies: '@ampproject/remapping': 2.2.1 - '@rollup/pluginutils': 5.0.4(rollup@2.79.1) - '@unocss/config': 0.56.0 - '@unocss/core': 0.56.0 - '@unocss/preset-uno': 0.56.0 + '@rollup/pluginutils': 5.0.5(rollup@2.79.1) + '@unocss/config': 0.57.1 + '@unocss/core': 0.57.1 + '@unocss/preset-uno': 0.57.1 cac: 6.7.14 chokidar: 3.5.3 colorette: 2.0.20 consola: 3.2.3 fast-glob: 3.3.1 - magic-string: 0.30.4 + magic-string: 0.30.5 pathe: 1.1.1 perfect-debounce: 1.0.0 transitivePeerDependencies: - rollup dev: true - /@unocss/config@0.56.0: - resolution: {integrity: sha512-TGyh3Ns15rKPRrVmiqcF9BcZ9yC0fixxwUGm49a2rQ91GOKNIZ6O/tX2MHxoncU/Sp2ZkrRreoT8fsEejfHAYg==} + /@unocss/config@0.57.1: + resolution: {integrity: sha512-mbuVO0mH1PX7rEkViMNWb3jG1ji7TUydo2DdnMHhJE+dOrGtnQzhzXGlAd4qqel1fnt/VWuOyZKwJA3QO6VCtg==} engines: {node: '>=14'} dependencies: - '@unocss/core': 0.56.0 - unconfig: 0.3.10 + '@unocss/core': 0.57.1 + unconfig: 0.3.11 dev: true - /@unocss/core@0.56.0: - resolution: {integrity: sha512-KpaEMCg5XnTK7aQRgwNWoPCAFLEmPGjw+OSZWuMtkGvMr4RwDAVUAqPdGyGOavKMyWs+Is+lxXL5NHy9nhZ2oA==} + /@unocss/core@0.57.1: + resolution: {integrity: sha512-cqQW/4gCuk+bFMPg9lBanuRNQ9Lx1l4PpMN/6uKxI5WROpq7ce/Xb4uGvAxKLh3ITtFSpXs2cLfsy7QD6cVD/Q==} dev: true - /@unocss/extractor-arbitrary-variants@0.56.0: - resolution: {integrity: sha512-OtdDsief0sqzYkS0GH9+LYUWojOjisjYjk5nLBI9lMfU23l/G76T2BzN8/W19MjUEs80relP4nO/ruefJn0hvw==} + /@unocss/extractor-arbitrary-variants@0.57.1: + resolution: {integrity: sha512-9s+azHhBnwjxm46TsD1RY0krDAwOR8tcw58Vtl3emd6C0VQsAOdoprt7UHE7GEXMvDVq7nMf8lAT0BM0LteW3w==} dependencies: - '@unocss/core': 0.56.0 + '@unocss/core': 0.57.1 dev: true - /@unocss/inspector@0.56.0: - resolution: {integrity: sha512-YGIyDe0eDzf0XhIHZRxZFV4xGKIA8jGBQ/rOF9k32Z8hyJ3jdJYf7s/ckA6s1kYxFq4qFmznylWeuh8JSUHeMg==} + /@unocss/inspector@0.57.1: + resolution: {integrity: sha512-qV7ta7iHGX2EpZJ4IWY/05kgyhKFeWlvVJbrOnGsaH8gVt33T/43YAhB/8K5GIXBXIwkhwk13iB13nlg2gSheg==} dependencies: - '@unocss/rule-utils': 0.56.0 + '@unocss/rule-utils': 0.57.1 gzip-size: 6.0.0 sirv: 2.0.3 dev: true - /@unocss/postcss@0.56.0(postcss@8.4.27): - resolution: {integrity: sha512-4wYpu8u8fjEeDvpA7m7Sq2wdIcXdoRSuu2HG/co7uqdXJJD6dQtOgI5Q0ooyPhWNx4w3zBCfaADBxfIcWsZotg==} + /@unocss/postcss@0.57.1(postcss@8.4.31): + resolution: {integrity: sha512-DexrV+v/qkVh6t660rXigNr2Y6lON8jxD1z2KVk2bjHKhFflF6q6seps6d/MquyLJI1mXF2uANTeFAeL2q6evw==} engines: {node: '>=14'} peerDependencies: postcss: ^8.4.21 dependencies: - '@unocss/config': 0.56.0 - '@unocss/core': 0.56.0 + '@unocss/config': 0.57.1 + '@unocss/core': 0.57.1 + '@unocss/rule-utils': 0.57.1 css-tree: 2.3.1 fast-glob: 3.3.1 - magic-string: 0.30.4 - postcss: 8.4.27 + magic-string: 0.30.5 + postcss: 8.4.31 dev: true - /@unocss/preset-attributify@0.56.0: - resolution: {integrity: sha512-0K+dy8Ey081Tgn1beADIrGmO3yhthM5KVqz+E+ni4o9paZg1DrBXnKA1Y8+fK3fEE1LmKK1hGhBrx68gCFX7XA==} + /@unocss/preset-attributify@0.57.1: + resolution: {integrity: sha512-pvGQHaqBlB0jQysWhNbcKLOGrkj8b53k0sAa9LYxQjD1fa8t/dwbuMpZv4twX+gysF0vBhxRoWBPLH1/S6zRZg==} dependencies: - '@unocss/core': 0.56.0 + '@unocss/core': 0.57.1 dev: true - /@unocss/preset-icons@0.56.0: - resolution: {integrity: sha512-b0WrDmChgk+5db6LSiZkCZ3wUInntFU82bbNSspE3DhCSsaNP0S6vxK6RGlyNuQayodsoW3gqThVuND8KYj7kg==} + /@unocss/preset-icons@0.57.1: + resolution: {integrity: sha512-ve4jC6yREfS0mv97DCld9xLjMuiSCcsQPKucdtpUfCjLMqtGd1ZGGdFv02Q+92NkW7HDfgj+izEw1SKh9695Ow==} dependencies: '@iconify/utils': 2.1.11 - '@unocss/core': 0.56.0 + '@unocss/core': 0.57.1 ofetch: 1.3.3 transitivePeerDependencies: - supports-color dev: true - /@unocss/preset-mini@0.56.0: - resolution: {integrity: sha512-uEdaiWF4RiU+RFtQjiv0R3RDRjNV+OFa3C+xVELLOIROnvb+h/D2wVxC8t8qOuVe8I6cHsGJgWfEpT3ptDhxqQ==} + /@unocss/preset-mini@0.57.1: + resolution: {integrity: sha512-v9ZsIUGDfZNXbIrOc7zrBp+RFbFFGSQN/vKIf761js4fJ31j6lan4pPQPGcY17xHConkI1HJT/+yb/UVJaAcHw==} dependencies: - '@unocss/core': 0.56.0 - '@unocss/extractor-arbitrary-variants': 0.56.0 - '@unocss/rule-utils': 0.56.0 + '@unocss/core': 0.57.1 + '@unocss/extractor-arbitrary-variants': 0.57.1 + '@unocss/rule-utils': 0.57.1 dev: true - /@unocss/preset-tagify@0.56.0: - resolution: {integrity: sha512-8FBHa+yPEFQ26BcqgBUrlLX7ThoMPRbH2AjQCk0RpgVhhy6OBweOFXmE0FhcOpNnM6DJadA6vlp3bTXZ0epqVA==} + /@unocss/preset-tagify@0.57.1: + resolution: {integrity: sha512-GV8knxnsOVH/XiG2KB+mVZeEJqr0PZvvkSTPftGPbjttoKVZ+28Y5q9/qezH7p4W6RYVAAK+3qHHy5wWZosiMw==} dependencies: - '@unocss/core': 0.56.0 + '@unocss/core': 0.57.1 dev: true - /@unocss/preset-typography@0.56.0: - resolution: {integrity: sha512-CF1dz+00TqTxQSIRkmCaUMk6+bB77z6PWB0VbxxpeYgpxKU1yC247tcBDmrQGhp1NmO4zr9COGEnl/o++OEXmQ==} + /@unocss/preset-typography@0.57.1: + resolution: {integrity: sha512-C4cqCiGW0OSoSXsVQKgfLulYxY5C8M40f+a8VtBlAaEaN6eSlEt+catXb0chF9T2mvz/b87b0PahPvPwJdDf1Q==} dependencies: - '@unocss/core': 0.56.0 - '@unocss/preset-mini': 0.56.0 + '@unocss/core': 0.57.1 + '@unocss/preset-mini': 0.57.1 dev: true - /@unocss/preset-uno@0.56.0: - resolution: {integrity: sha512-DlTZZ4kS6BEwJTTp5ly86UdhnUhCfgctRDv6gT8LYcji7VInYEPdTA0+Szy7PZtQFeQE8E3kONsiKuoVlwLtPw==} + /@unocss/preset-uno@0.57.1: + resolution: {integrity: sha512-0+DKZiowYjYzq2swJzQA2dhqDvLJdm0Y437ITzc2GzZMKGUUuNi+w2v3/SzwkpkRd9zTB9/YaOIJVfdrx6ZOXQ==} dependencies: - '@unocss/core': 0.56.0 - '@unocss/preset-mini': 0.56.0 - '@unocss/preset-wind': 0.56.0 - '@unocss/rule-utils': 0.56.0 + '@unocss/core': 0.57.1 + '@unocss/preset-mini': 0.57.1 + '@unocss/preset-wind': 0.57.1 + '@unocss/rule-utils': 0.57.1 dev: true - /@unocss/preset-web-fonts@0.56.0: - resolution: {integrity: sha512-25BSNm29oOY9N37awVV902cmdGd3e8G1EdVm0kqA7YxwUViSdoej0C1R+i27WsrBPtwpLyulRjrjWgtxM/3E8g==} + /@unocss/preset-web-fonts@0.57.1: + resolution: {integrity: sha512-9DCIMlBRaGrljLmeciH4WqP+uRx2z2nLxvrvEmGbpJJpMn2H4higR5Zu5tDyKYGr9QBl9vXdWgib+43OSswkqA==} dependencies: - '@unocss/core': 0.56.0 + '@unocss/core': 0.57.1 ofetch: 1.3.3 dev: true - /@unocss/preset-wind@0.56.0: - resolution: {integrity: sha512-P978d2+kc/LALmDO8bG00oCvAAA2EGW0mIzoZRM+eb5zWSDEkkSuC+YoiLehbByRkw0voAMgqobWxYIb2GUmfg==} + /@unocss/preset-wind@0.57.1: + resolution: {integrity: sha512-5UairNahUXNDe9AggPtTCodyPjl6NgPCsiEB22LVgN20UjBXjaqzN5wUe1OgtpLoAUaSk0KI7eLWhnWbTbST3A==} dependencies: - '@unocss/core': 0.56.0 - '@unocss/preset-mini': 0.56.0 - '@unocss/rule-utils': 0.56.0 + '@unocss/core': 0.57.1 + '@unocss/preset-mini': 0.57.1 + '@unocss/rule-utils': 0.57.1 dev: true - /@unocss/reset@0.56.0: - resolution: {integrity: sha512-zTvUeN4Dkn+DY8YFHjKd+hfIpqcsNOKOeD0M64fWVjD0LmuuyuFASySYEGjlfvEEUjDiyNg96SnTXyOETYDclg==} + /@unocss/reset@0.57.1: + resolution: {integrity: sha512-f/ofoudjFN/HMtv1XV5phP58pOmNruBhr0GbVdBNylyieMQkFHowA7iSemChnC/fTbCcY6oSOAcFl4n9AefjdA==} dev: true - /@unocss/rule-utils@0.56.0: - resolution: {integrity: sha512-ozxI/KlAZmvRlsVy+oysuCXoxXm6141QsYwH1q8heIBBVTOY1jku82VveCfv4ZWrewYkgd27ME7e77ArfGLzyw==} + /@unocss/rule-utils@0.57.1: + resolution: {integrity: sha512-Hdicz7YORZx7SHICldzOGjPNeJwk/Xhy3cycqiPbg6nB6d639bpgZn5BsbDzHCPKpguwDomUqTZS6+C3s7tUVg==} engines: {node: '>=14'} dependencies: - '@unocss/core': 0.56.0 + '@unocss/core': 0.57.1 + magic-string: 0.30.5 dev: true - /@unocss/scope@0.56.0: - resolution: {integrity: sha512-zGUxAhHh04cqzBgfsAFjQg4xsna+3Y9ST1G/Lcs3CNzm9GC/SSPwcNzFel+r75Wtx/2WlhjmWCnK5gOzRR3l6Q==} + /@unocss/scope@0.57.1: + resolution: {integrity: sha512-ZAzg6lLGwKNQGCvJXEie3TvGztkAyajEFqygu0mjtHb+CmDql4iAjoygs+3dnRI5hSDwfMYFrJ2azX26+2CsoA==} dev: true - /@unocss/transformer-attributify-jsx-babel@0.56.0: - resolution: {integrity: sha512-wOMAr5TnGOZgc6Pqkdecg3O3x1kH7lsyDQxsTqZz3CjYDr9iJMWdRir3UwQVTxg6Xy/BfRE0Qe7LcFIR0BJPHg==} + /@unocss/transformer-attributify-jsx-babel@0.57.1: + resolution: {integrity: sha512-EOCPB8OGmhroAuFU0i0W5p6GmJpx6mAkP4KmsqVLd4QMgw+8aXkG7SKyLnxQZnekM0/dSo0TcpVGeGrZaUNgvQ==} dependencies: - '@unocss/core': 0.56.0 + '@unocss/core': 0.57.1 dev: true - /@unocss/transformer-attributify-jsx@0.56.0: - resolution: {integrity: sha512-g1zc7y/oLsSi6qH2GwdfWwWaG6w/hQaL3XyOJ0hpn86N8qcLbeeH7IJdnrGXX1R/w7Z0t9Lz9lhGb+UP3ymmfQ==} + /@unocss/transformer-attributify-jsx@0.57.1: + resolution: {integrity: sha512-ohgSEwm2j98ltPWl1zRPvZhRjQPpd7qZtgoROTQh6n2W7wEO1SlnYjgBBz+pGuo2dkfBN5NjuZJ93AEjS10Ysw==} dependencies: - '@unocss/core': 0.56.0 + '@unocss/core': 0.57.1 dev: true - /@unocss/transformer-compile-class@0.56.0: - resolution: {integrity: sha512-8+CKMGk5qBe3I1/c8DoggWuhVmZ/6QlTHpLRs5Xt6LS5CF2vrLhjyqMNnBvVcp8OKTeAfv2U6kGKPXFSvSEVUA==} + /@unocss/transformer-compile-class@0.57.1: + resolution: {integrity: sha512-z0WZN6hbgpyBm2xqIrojqEjpQMhiyzHRbaBjWzI/6ieHWoFo5ajIwnReaFUEfJRNruLTd7/9hFDZdRXRPhttFw==} dependencies: - '@unocss/core': 0.56.0 + '@unocss/core': 0.57.1 dev: true - /@unocss/transformer-directives@0.56.0: - resolution: {integrity: sha512-6WthoetYrDDKamuYfsRbX+R3scyomcxA10YV8VlZ19hJIyIhZdCWEoyLccVsS4+uBIZUo0RjhxaxwyYtPa1dBQ==} + /@unocss/transformer-directives@0.57.1: + resolution: {integrity: sha512-rIk3XEU2NywEJUOkngBSmJfvS3IVgxkkqgMvuIqz8ZDbwWhepuMxsiI0QR3ypkipGr/eKK5DJ7eK0OVlo6FPFA==} dependencies: - '@unocss/core': 0.56.0 - '@unocss/rule-utils': 0.56.0 + '@unocss/core': 0.57.1 + '@unocss/rule-utils': 0.57.1 css-tree: 2.3.1 dev: true - /@unocss/transformer-variant-group@0.56.0: - resolution: {integrity: sha512-4QLGUPD2ephvrSemIapiL3ckr1xcdcjxk/VZ/SOobLrHyxCLzLaHZz6x7RabCWf2Ub/01xWtLY3eSNIphZ5iSg==} + /@unocss/transformer-variant-group@0.57.1: + resolution: {integrity: sha512-qwydzn2Lqz/8zW6UUXdORaUl8humsG8ll74LN/z8cjEsqtXZkVdkV0l6Brpp9Xp/XPbKwO+II+KH3/1LGwXSzQ==} dependencies: - '@unocss/core': 0.56.0 + '@unocss/core': 0.57.1 dev: true - /@unocss/vite@0.56.0(rollup@2.79.1)(vite@4.4.9): - resolution: {integrity: sha512-QFuX2jHYiNCdzffxVyBuECnkaaQzYkvf+P3VU/yNyUuH9DAzSIBVEpS04dRQQ7IdQiVduIpldL+IgUr/qW+IUA==} + /@unocss/vite@0.57.1(rollup@2.79.1)(vite@4.4.9): + resolution: {integrity: sha512-kEBDvGgQNkX2n87S6Ao5seyFb1kuWZ5p96dGOS7VFpD7HvR5xholkJXaVhUK9/exCldjLExbo5UtVlbxFLUFYg==} peerDependencies: vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 dependencies: '@ampproject/remapping': 2.2.1 - '@rollup/pluginutils': 5.0.4(rollup@2.79.1) - '@unocss/config': 0.56.0 - '@unocss/core': 0.56.0 - '@unocss/inspector': 0.56.0 - '@unocss/scope': 0.56.0 - '@unocss/transformer-directives': 0.56.0 + '@rollup/pluginutils': 5.0.5(rollup@2.79.1) + '@unocss/config': 0.57.1 + '@unocss/core': 0.57.1 + '@unocss/inspector': 0.57.1 + '@unocss/scope': 0.57.1 + '@unocss/transformer-directives': 0.57.1 chokidar: 3.5.3 fast-glob: 3.3.1 - magic-string: 0.30.4 + magic-string: 0.30.5 vite: 4.4.9(@types/node@18.17.5) transitivePeerDependencies: - rollup @@ -5461,7 +5467,7 @@ packages: dependencies: '@vue/compiler-ssr': 3.3.7 '@vue/shared': 3.3.7 - vue: 3.3.7(typescript@5.1.6) + vue: 3.3.7(typescript@5.0.4) dev: true /@vue/shared@3.3.4: @@ -11207,6 +11213,12 @@ packages: /jiti@1.19.1: resolution: {integrity: sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==} hasBin: true + dev: false + + /jiti@1.21.0: + resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==} + hasBin: true + dev: true /jju@1.4.0: resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==} @@ -12482,6 +12494,15 @@ packages: ufo: 1.2.0 dev: true + /mlly@1.4.2: + resolution: {integrity: sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==} + dependencies: + acorn: 8.10.0 + pathe: 1.1.1 + pkg-types: 1.0.3 + ufo: 1.3.1 + dev: true + /mri@1.2.0: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} engines: {node: '>=4'} @@ -15350,13 +15371,13 @@ packages: which-boxed-primitive: 1.0.2 dev: true - /unconfig@0.3.10: - resolution: {integrity: sha512-tj317lhIq2iZF/NXrJnU1t2UaGUKKz1eL1sK2t63Oq66V9BxqvZV12m55fp/fpQJ+DDmVlLgo7cnLVOZkhlO/A==} + /unconfig@0.3.11: + resolution: {integrity: sha512-bV/nqePAKv71v3HdVUn6UefbsDKQWRX+bJIkiSm0+twIds6WiD2bJLWWT3i214+J/B4edufZpG2w7Y63Vbwxow==} dependencies: - '@antfu/utils': 0.7.5 + '@antfu/utils': 0.7.6 defu: 6.1.2 - jiti: 1.19.1 - mlly: 1.4.0 + jiti: 1.21.0 + mlly: 1.4.2 dev: true /underscore@1.1.7: @@ -15462,11 +15483,11 @@ packages: engines: {node: '>= 10.0.0'} dev: true - /unocss@0.56.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.4.9): - resolution: {integrity: sha512-Ge0lMi1zYL2z/NCv0OMeYMUeLsjQGNeohSc/3qumEtGhBNiGrF6sVX80BnJ99fAFsn80nxJepWbCApUmZ/2tJA==} + /unocss@0.57.1(postcss@8.4.31)(rollup@2.79.1)(vite@4.4.9): + resolution: {integrity: sha512-xLsyJ8+T1/Ux93yrqOvuQy268wF5rSzydlsbqZ5EVfi01PxYyydez3nycPqbyPZientkJ0Yohzd5aBqmZgku3A==} engines: {node: '>=14'} peerDependencies: - '@unocss/webpack': 0.56.0 + '@unocss/webpack': 0.57.1 vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 peerDependenciesMeta: '@unocss/webpack': @@ -15474,26 +15495,26 @@ packages: vite: optional: true dependencies: - '@unocss/astro': 0.56.0(rollup@2.79.1)(vite@4.4.9) - '@unocss/cli': 0.56.0(rollup@2.79.1) - '@unocss/core': 0.56.0 - '@unocss/extractor-arbitrary-variants': 0.56.0 - '@unocss/postcss': 0.56.0(postcss@8.4.27) - '@unocss/preset-attributify': 0.56.0 - '@unocss/preset-icons': 0.56.0 - '@unocss/preset-mini': 0.56.0 - '@unocss/preset-tagify': 0.56.0 - '@unocss/preset-typography': 0.56.0 - '@unocss/preset-uno': 0.56.0 - '@unocss/preset-web-fonts': 0.56.0 - '@unocss/preset-wind': 0.56.0 - '@unocss/reset': 0.56.0 - '@unocss/transformer-attributify-jsx': 0.56.0 - '@unocss/transformer-attributify-jsx-babel': 0.56.0 - '@unocss/transformer-compile-class': 0.56.0 - '@unocss/transformer-directives': 0.56.0 - '@unocss/transformer-variant-group': 0.56.0 - '@unocss/vite': 0.56.0(rollup@2.79.1)(vite@4.4.9) + '@unocss/astro': 0.57.1(rollup@2.79.1)(vite@4.4.9) + '@unocss/cli': 0.57.1(rollup@2.79.1) + '@unocss/core': 0.57.1 + '@unocss/extractor-arbitrary-variants': 0.57.1 + '@unocss/postcss': 0.57.1(postcss@8.4.31) + '@unocss/preset-attributify': 0.57.1 + '@unocss/preset-icons': 0.57.1 + '@unocss/preset-mini': 0.57.1 + '@unocss/preset-tagify': 0.57.1 + '@unocss/preset-typography': 0.57.1 + '@unocss/preset-uno': 0.57.1 + '@unocss/preset-web-fonts': 0.57.1 + '@unocss/preset-wind': 0.57.1 + '@unocss/reset': 0.57.1 + '@unocss/transformer-attributify-jsx': 0.57.1 + '@unocss/transformer-attributify-jsx-babel': 0.57.1 + '@unocss/transformer-compile-class': 0.57.1 + '@unocss/transformer-directives': 0.57.1 + '@unocss/transformer-variant-group': 0.57.1 + '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.4.9) vite: 4.4.9(@types/node@18.17.5) transitivePeerDependencies: - postcss @@ -15817,7 +15838,7 @@ packages: fsevents: 2.3.2 dev: true - /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.4): + /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.7): resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==} engines: {node: ^14.13.1 || ^16.7.0 || >=18} peerDependencies: @@ -15831,7 +15852,7 @@ packages: glob-to-regexp: 0.4.1 markdown-it: 13.0.1 vitepress: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0) - vue: 3.3.4 + vue: 3.3.7(typescript@5.0.4) dev: true /vitepress@1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0): @@ -15865,7 +15886,7 @@ packages: - terser dev: true - /vitepress@1.0.0-rc.24(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0)(typescript@5.1.6): + /vitepress@1.0.0-rc.24(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6): resolution: {integrity: sha512-RpnL8cnOGwiRlBbrYQUm9sYkJbtyOt/wYXk2diTcokY4yvks/5lq9LuSt+MURWB6ZqwpSNHvTmxgaSfLoG0/OA==} hasBin: true peerDependencies: @@ -15887,7 +15908,7 @@ packages: focus-trap: 7.5.4 mark.js: 8.11.1 minisearch: 6.1.0 - postcss: 8.4.27 + postcss: 8.4.31 shiki: 0.14.5 vite: 4.5.0(@types/node@18.17.5) vue: 3.3.7(typescript@5.1.6) @@ -16074,6 +16095,22 @@ packages: '@vue/server-renderer': 3.3.4(vue@3.3.4) '@vue/shared': 3.3.4 + /vue@3.3.7(typescript@5.0.4): + resolution: {integrity: sha512-YEMDia1ZTv1TeBbnu6VybatmSteGOS3A3YgfINOfraCbf85wdKHzscD6HSS/vB4GAtI7sa1XPX7HcQaJ1l24zA==} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@vue/compiler-dom': 3.3.7 + '@vue/compiler-sfc': 3.3.7 + '@vue/runtime-dom': 3.3.7 + '@vue/server-renderer': 3.3.7(vue@3.3.7) + '@vue/shared': 3.3.7 + typescript: 5.0.4 + dev: true + /vue@3.3.7(typescript@5.1.6): resolution: {integrity: sha512-YEMDia1ZTv1TeBbnu6VybatmSteGOS3A3YgfINOfraCbf85wdKHzscD6HSS/vB4GAtI7sa1XPX7HcQaJ1l24zA==} peerDependencies: From 6e6e92a1d13e3742c6e340d3271a597668059143 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi <aakansha1216@gmail.com> Date: Fri, 3 Nov 2023 13:16:30 +0530 Subject: [PATCH 101/126] review fixes --- packages/mermaid/src/Diagram.ts | 3 +- packages/mermaid/src/diagram-api/types.ts | 9 ------ packages/mermaid/src/diagram.spec.ts | 8 ++--- packages/mermaid/src/mermaidAPI.spec.ts | 3 +- packages/mermaid/src/mermaidAPI.ts | 38 +---------------------- packages/mermaid/src/utils.ts | 37 ++++++++++++++++++++++ 6 files changed, 44 insertions(+), 54 deletions(-) diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts index 4fc12d1036..37795ed62e 100644 --- a/packages/mermaid/src/Diagram.ts +++ b/packages/mermaid/src/Diagram.ts @@ -3,9 +3,8 @@ import { log } from './logger.js'; import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.js'; import { detectType, getDiagramLoader } from './diagram-api/detectType.js'; import { UnknownDiagramError } from './errors.js'; -import type { DetailedError } from './utils.js'; +import { encodeEntities, type DetailedError } from './utils.js'; import type { DiagramDefinition, DiagramMetadata } from './diagram-api/types.js'; -import { encodeEntities } from './mermaidAPI.js'; export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void; diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts index 232550b4f0..58d98107ea 100644 --- a/packages/mermaid/src/diagram-api/types.ts +++ b/packages/mermaid/src/diagram-api/types.ts @@ -19,14 +19,6 @@ export interface InjectUtils { _parseDirective: any; } -export type Message = { - type: number; - to: string; - from: string; - message: string; - wrap: boolean; -}; - /** * Generic Diagram DB that may apply to any diagram type. */ @@ -45,7 +37,6 @@ export interface DiagramDB { setDisplayMode?: (title: string) => void; bindFunctions?: (element: Element) => void; - getMessages?: () => Message[]; } // This is what is returned from getClasses(...) methods. diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts index 4e3c4884d1..2a84736808 100644 --- a/packages/mermaid/src/diagram.spec.ts +++ b/packages/mermaid/src/diagram.spec.ts @@ -74,13 +74,13 @@ Expecting 'TXT', got 'NEWLINE'" const diagram = await getDiagramFromText(`sequenceDiagram A->>B: I #9829; you! B->>A: I #9829; you #infin; times more!`); + //@ts-ignore const messages = diagram.db?.getMessages?.(); if (!messages) { throw new Error('Messages not found!'); } - const result = ['I fl°°9829¶ß you!', 'I fl°°9829¶ß you fl°infin¶ß times more!']; - messages.forEach((message, index: number) => { - expect(message.message).toBe(result[index]); - }); + + expect(messages[0].message).toBe('I fl°°9829¶ß you!'); + expect(messages[1].message).toBe('I fl°°9829¶ß you fl°infin¶ß times more!'); }); }); diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts index a79fd44c4a..32647ee625 100644 --- a/packages/mermaid/src/mermaidAPI.spec.ts +++ b/packages/mermaid/src/mermaidAPI.spec.ts @@ -38,8 +38,6 @@ import type { MermaidConfig } from './config.type.js'; import mermaidAPI, { removeExistingElements } from './mermaidAPI.js'; import { - encodeEntities, - decodeEntities, createCssStyles, createUserStyles, appendDivSvgG, @@ -68,6 +66,7 @@ vi.mock('stylis', () => { }; }); import { compile, serialize } from 'stylis'; +import { decodeEntities, encodeEntities } from './utils.js'; /** * @see https://vitest.dev/guide/mocking.html Mock part of a module diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 9637eca002..09d0077803 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -30,6 +30,7 @@ import isEmpty from 'lodash-es/isEmpty.js'; import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js'; import type { DiagramStyleClassDef } from './diagram-api/types.js'; import { preprocessDiagram } from './preprocess.js'; +import { decodeEntities } from './utils.js'; const MAX_TEXTLENGTH = 50_000; const MAX_TEXTLENGTH_EXCEEDED_MSG = @@ -110,43 +111,6 @@ async function parse(text: string, parseOptions?: ParseOptions): Promise<boolean return true; } -/** - * @param text - text to be encoded - * @returns - */ -export const encodeEntities = function (text: string): string { - let txt = text; - - txt = txt.replace(/style.*:\S*#.*;/g, function (s): string { - return s.substring(0, s.length - 1); - }); - txt = txt.replace(/classDef.*:\S*#.*;/g, function (s): string { - return s.substring(0, s.length - 1); - }); - - txt = txt.replace(/#\w+;/g, function (s) { - const innerTxt = s.substring(1, s.length - 1); - - const isInt = /^\+?\d+$/.test(innerTxt); - if (isInt) { - return 'fl°°' + innerTxt + '¶ß'; - } else { - return 'fl°' + innerTxt + '¶ß'; - } - }); - - return txt; -}; - -/** - * - * @param text - text to be decoded - * @returns - */ -export const decodeEntities = function (text: string): string { - return text.replace(/fl°°/g, '&#').replace(/fl°/g, '&').replace(/¶ß/g, ';'); -}; - // append !important; to each cssClass followed by a final !important, all enclosed in { } // /** diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts index e706ef1227..b90d33f473 100644 --- a/packages/mermaid/src/utils.ts +++ b/packages/mermaid/src/utils.ts @@ -888,3 +888,40 @@ export default { parseFontSize, InitIDGenerator, }; + +/** + * @param text - text to be encoded + * @returns + */ +export const encodeEntities = function (text: string): string { + let txt = text; + + txt = txt.replace(/style.*:\S*#.*;/g, function (s): string { + return s.substring(0, s.length - 1); + }); + txt = txt.replace(/classDef.*:\S*#.*;/g, function (s): string { + return s.substring(0, s.length - 1); + }); + + txt = txt.replace(/#\w+;/g, function (s) { + const innerTxt = s.substring(1, s.length - 1); + + const isInt = /^\+?\d+$/.test(innerTxt); + if (isInt) { + return 'fl°°' + innerTxt + '¶ß'; + } else { + return 'fl°' + innerTxt + '¶ß'; + } + }); + + return txt; +}; + +/** + * + * @param text - text to be decoded + * @returns + */ +export const decodeEntities = function (text: string): string { + return text.replace(/fl°°/g, '&#').replace(/fl°/g, '&').replace(/¶ß/g, ';'); +}; From 58bad981be92ae7be0e3b8488c15af72686e9e17 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi <aakansha1216@gmail.com> Date: Fri, 3 Nov 2023 13:25:26 +0530 Subject: [PATCH 102/126] move decodeEntities to utils --- packages/mermaid/src/Diagram.ts | 4 +++- packages/mermaid/src/dagre-wrapper/createLabel.js | 2 +- packages/mermaid/src/dagre-wrapper/shapes/util.js | 2 +- packages/mermaid/src/rendering-util/createText.ts | 2 +- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts index 37795ed62e..f1d1bc6e8e 100644 --- a/packages/mermaid/src/Diagram.ts +++ b/packages/mermaid/src/Diagram.ts @@ -3,7 +3,9 @@ import { log } from './logger.js'; import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.js'; import { detectType, getDiagramLoader } from './diagram-api/detectType.js'; import { UnknownDiagramError } from './errors.js'; -import { encodeEntities, type DetailedError } from './utils.js'; +import { encodeEntities } from './utils.js'; + +import type { DetailedError } from './utils.js'; import type { DiagramDefinition, DiagramMetadata } from './diagram-api/types.js'; export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void; diff --git a/packages/mermaid/src/dagre-wrapper/createLabel.js b/packages/mermaid/src/dagre-wrapper/createLabel.js index c120f2083c..4c947879cb 100644 --- a/packages/mermaid/src/dagre-wrapper/createLabel.js +++ b/packages/mermaid/src/dagre-wrapper/createLabel.js @@ -2,7 +2,7 @@ import { select } from 'd3'; import { log } from '../logger.js'; import { getConfig } from '../diagram-api/diagramAPI.js'; import { evaluate } from '../diagrams/common/common.js'; -import { decodeEntities } from '../mermaidAPI.js'; +import { decodeEntities } from '../utils.js'; /** * @param dom diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js index fbcb5198fb..079125e3a6 100644 --- a/packages/mermaid/src/dagre-wrapper/shapes/util.js +++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js @@ -1,9 +1,9 @@ import createLabel from '../createLabel.js'; import { createText } from '../../rendering-util/createText.js'; import { getConfig } from '../../diagram-api/diagramAPI.js'; -import { decodeEntities } from '../../mermaidAPI.js'; import { select } from 'd3'; import { evaluate, sanitizeText } from '../../diagrams/common/common.js'; +import { decodeEntities } from '../../utils.js'; export const labelHelper = async (parent, node, _classes, isNode) => { let classes; diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts index a15b921939..2b48cf5f3a 100644 --- a/packages/mermaid/src/rendering-util/createText.ts +++ b/packages/mermaid/src/rendering-util/createText.ts @@ -3,8 +3,8 @@ import type { Group } from '../diagram-api/types.js'; import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js'; import { log } from '../logger.js'; -import { decodeEntities } from '../mermaidAPI.js'; import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js'; +import { decodeEntities } from '../utils.js'; import { splitLineToFitWidth } from './splitText.js'; import type { MarkdownLine, MarkdownWord } from './types.js'; From a818f3e3ae6cf83436db51b5b0f8b9af7b3a9838 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi <aakansha1216@gmail.com> Date: Fri, 3 Nov 2023 13:31:21 +0530 Subject: [PATCH 103/126] add comment for ts ignore --- packages/mermaid/src/diagram.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts index 2a84736808..4354f57bce 100644 --- a/packages/mermaid/src/diagram.spec.ts +++ b/packages/mermaid/src/diagram.spec.ts @@ -74,7 +74,7 @@ Expecting 'TXT', got 'NEWLINE'" const diagram = await getDiagramFromText(`sequenceDiagram A->>B: I #9829; you! B->>A: I #9829; you #infin; times more!`); - //@ts-ignore + // @ts-ignore: we need to add types for sequenceDb which will be done in separate PR const messages = diagram.db?.getMessages?.(); if (!messages) { throw new Error('Messages not found!'); From 4ba3e2cff3fba0763d35429a345f1cffbbdb4bd3 Mon Sep 17 00:00:00 2001 From: StefonSimmons <57869435+StefonSimmons@users.noreply.github.com> Date: Fri, 3 Nov 2023 15:51:33 -0400 Subject: [PATCH 104/126] Update index.md fix typo --- packages/mermaid/src/docs/intro/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/intro/index.md b/packages/mermaid/src/docs/intro/index.md index bd45ffaf1a..535ee3a3dc 100644 --- a/packages/mermaid/src/docs/intro/index.md +++ b/packages/mermaid/src/docs/intro/index.md @@ -97,7 +97,7 @@ To Deploy Mermaid: </script> ``` -**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.** +**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries to read the diagram/chart definitions and render them into SVG charts.** **Examples can be found in** [Other examples](../syntax/examples.md) From b61ea4b8aa2f5d38ad6af828ed0620a589ec5786 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arda=20Ayd=C4=B1n?= <melezorus34@gmail.com> Date: Sun, 5 Nov 2023 22:35:36 +0300 Subject: [PATCH 105/126] Update XYChart's nav link in the docs template The site gives 404 with xychart but navigates correctly with xyChart --- packages/mermaid/src/docs/.vitepress/config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 040a669133..ed4646c598 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -150,7 +150,7 @@ function sidebarSyntax() { { text: 'Timeline 🔥', link: '/syntax/timeline' }, { text: 'Zenuml 🔥', link: '/syntax/zenuml' }, { text: 'Sankey 🔥', link: '/syntax/sankey' }, - { text: 'XYChart 🔥', link: '/syntax/xychart' }, + { text: 'XYChart 🔥', link: '/syntax/xyChart' }, { text: 'Other Examples', link: '/syntax/examples' }, ], }, From dff13439f635d9b46b97a259c1b418296b876809 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi <aakansha1216@gmail.com> Date: Mon, 6 Nov 2023 12:17:43 +0530 Subject: [PATCH 106/126] review fixes --- .../interfaces/mermaidAPI.ParseOptions.md | 2 +- .../interfaces/mermaidAPI.RenderResult.md | 4 +- docs/config/setup/modules/mermaidAPI.md | 58 +++---------------- packages/mermaid/src/Diagram.ts | 3 +- 4 files changed, 13 insertions(+), 54 deletions(-) diff --git a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md index ea390899e4..4386be9380 100644 --- a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md +++ b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md @@ -16,4 +16,4 @@ #### Defined in -[mermaidAPI.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L59) +[mermaidAPI.ts:60](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L60) diff --git a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md index 18ee5e4316..6209782f75 100644 --- a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md +++ b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md @@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present. #### Defined in -[mermaidAPI.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L79) +[mermaidAPI.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L80) --- @@ -51,4 +51,4 @@ The svg code for the rendered graph. #### Defined in -[mermaidAPI.ts:69](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L69) +[mermaidAPI.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L70) diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index 0a948b6f39..6337807883 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi) #### Defined in -[mermaidAPI.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L63) +[mermaidAPI.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L64) ## Variables @@ -96,7 +96,7 @@ mermaid.initialize(config); #### Defined in -[mermaidAPI.ts:641](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L641) +[mermaidAPI.ts:603](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L603) ## Functions @@ -127,7 +127,7 @@ Return the last node appended #### Defined in -[mermaidAPI.ts:299](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L299) +[mermaidAPI.ts:263](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L263) --- @@ -153,7 +153,7 @@ the cleaned up svgCode #### Defined in -[mermaidAPI.ts:245](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L245) +[mermaidAPI.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L209) --- @@ -178,7 +178,7 @@ the string with all the user styles #### Defined in -[mermaidAPI.ts:175](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L175) +[mermaidAPI.ts:139](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L139) --- @@ -201,7 +201,7 @@ the string with all the user styles #### Defined in -[mermaidAPI.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L222) +[mermaidAPI.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L186) --- @@ -228,47 +228,7 @@ with an enclosing block that has each of the cssClasses followed by !important; #### Defined in -[mermaidAPI.ts:160](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L160) - ---- - -### decodeEntities - -▸ **decodeEntities**(`text`): `string` - -#### Parameters - -| Name | Type | Description | -| :----- | :------- | :----------------- | -| `text` | `string` | text to be decoded | - -#### Returns - -`string` - -#### Defined in - -[mermaidAPI.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L146) - ---- - -### encodeEntities - -▸ **encodeEntities**(`text`): `string` - -#### Parameters - -| Name | Type | Description | -| :----- | :------- | :----------------- | -| `text` | `string` | text to be encoded | - -#### Returns - -`string` - -#### Defined in - -[mermaidAPI.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L117) +[mermaidAPI.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L124) --- @@ -294,7 +254,7 @@ Put the svgCode into an iFrame. Return the iFrame code #### Defined in -[mermaidAPI.ts:276](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L276) +[mermaidAPI.ts:240](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L240) --- @@ -319,4 +279,4 @@ Remove any existing elements from the given document #### Defined in -[mermaidAPI.ts:349](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L349) +[mermaidAPI.ts:313](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L313) diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts index f1d1bc6e8e..2b5ae89923 100644 --- a/packages/mermaid/src/Diagram.ts +++ b/packages/mermaid/src/Diagram.ts @@ -23,6 +23,7 @@ export class Diagram { private detectError?: UnknownDiagramError; constructor(public text: string, public metadata: Pick<DiagramMetadata, 'title'> = {}) { + this.text = encodeEntities(text); this.text += '\n'; const cnf = configApi.getConfig(); try { @@ -83,8 +84,6 @@ export const getDiagramFromText = async ( text: string, metadata: Pick<DiagramMetadata, 'title'> = {} ): Promise<Diagram> => { - text = encodeEntities(text); - const type = detectType(text, configApi.getConfig()); try { // Trying to find the diagram From 172d90e7318ebe5bc07422f726eed48c113b262e Mon Sep 17 00:00:00 2001 From: Alois Klink <alois@mermaidchart.com> Date: Mon, 6 Nov 2023 10:05:47 +0000 Subject: [PATCH 107/126] fix(flow): fix invalid ellipseText regex This invalid regex was causing Mermaid to freeze. --- .../mermaid/src/diagrams/flowchart/parser/flow-text.spec.js | 4 ++++ packages/mermaid/src/diagrams/flowchart/parser/flow.jison | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js index b127e1b65d..61eccbbc8e 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js @@ -535,6 +535,10 @@ describe('[Text] when parsing', () => { expect(vert['A'].text).toBe('this is an ellipse'); }); + it('should not freeze when ellipse text has a `(`', function () { + expect(() => flow.parser.parse('graph\nX(- My Text (')).toThrowError(); + }); + it('should handle text in diamond vertices with space', function () { const res = flow.parser.parse('graph TD;A(chimpansen hoppar)-->C;'); diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison index 6dad36d25f..de23d93cb9 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison @@ -134,7 +134,7 @@ that id. <*>\s*\~\~[\~]+\s* return 'LINK'; <ellipseText>[-/\)][\)] { this.popState(); return '-)'; } -<ellipseText>[^\(\)\[\]\{\}]|-/!\)+ return "TEXT" +<ellipseText>[^\(\)\[\]\{\}]|-\!\)+ return "TEXT" <*>"(-" { this.pushState("ellipseText"); return '(-'; } <text>"])" { this.popState(); return 'STADIUMEND'; } From 23cbf50413e82a2f9160fddb648bfa69c44a8d17 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi <aakansha1216@gmail.com> Date: Mon, 6 Nov 2023 18:47:38 +0530 Subject: [PATCH 108/126] fix: render the participants in same order as they are created --- demos/sequence.html | 9 ++++++++- packages/mermaid/src/diagrams/sequence/svgDraw.js | 3 ++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/demos/sequence.html b/demos/sequence.html index b2733a384e..035dc7385d 100644 --- a/demos/sequence.html +++ b/demos/sequence.html @@ -164,6 +164,13 @@ <h1>Sequence diagram demos</h1> end </pre> + <pre class="mermaid"> + sequenceDiagram + actor Alice + actor John + Alice-xJohn: Hello John, how are you? + John--xAlice: Great! + </pre> <script type="module"> import mermaid from './mermaid.esm.mjs'; mermaid.initialize({ @@ -174,7 +181,7 @@ <h1>Sequence diagram demos</h1> flowchart: { curve: 'basis' }, gantt: { axisFormat: '%m/%d/%Y' }, sequence: { actorMargin: 50 }, - // sequenceDiagram: { actorMargin: 300 } // deprecated + sequenceDiagram: { actorMargin: 300 }, // deprecated }); </script> </body> diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index f81147c10c..87899df1ec 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -324,7 +324,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) { const center = actor.x + actor.width / 2; const centerY = actorY + 5; - const boxpluslineGroup = elem.append('g').lower(); + const boxpluslineGroup = elem.append('g').raise(); var g = boxpluslineGroup; if (!isFooter) { @@ -1038,6 +1038,7 @@ export default { drawText, drawLabel, drawActor, + drawActorTypeParticipant, drawBox, drawPopup, anchorElement, From 78c1a3d98027393e99a96031b4fe0e943a248886 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi <aakansha1216@gmail.com> Date: Mon, 6 Nov 2023 18:57:47 +0530 Subject: [PATCH 109/126] fix --- demos/sequence.html | 2 +- packages/mermaid/src/diagrams/sequence/svgDraw.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/demos/sequence.html b/demos/sequence.html index 035dc7385d..d7bce2fef2 100644 --- a/demos/sequence.html +++ b/demos/sequence.html @@ -181,7 +181,7 @@ <h1>Sequence diagram demos</h1> flowchart: { curve: 'basis' }, gantt: { axisFormat: '%m/%d/%Y' }, sequence: { actorMargin: 50 }, - sequenceDiagram: { actorMargin: 300 }, // deprecated + // sequenceDiagram: { actorMargin: 300 }, // deprecated }); </script> </body> diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index 87899df1ec..fd490e5ae6 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -1038,7 +1038,6 @@ export default { drawText, drawLabel, drawActor, - drawActorTypeParticipant, drawBox, drawPopup, anchorElement, From dff8b783b8f85bb9b6b71986fdbce80f3ddfb204 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi <aakansha1216@gmail.com> Date: Mon, 6 Nov 2023 19:02:10 +0530 Subject: [PATCH 110/126] fix --- packages/mermaid/src/diagrams/sequence/svgDraw.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index fd490e5ae6..31e6dc2a89 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -324,7 +324,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) { const center = actor.x + actor.width / 2; const centerY = actorY + 5; - const boxpluslineGroup = elem.append('g').raise(); + const boxpluslineGroup = elem.append('g'); var g = boxpluslineGroup; if (!isFooter) { From 65daab2aaf8fc3e54f34b2d468d19486034e06c7 Mon Sep 17 00:00:00 2001 From: Alois Klink <alois@mermaidchart.com> Date: Mon, 6 Nov 2023 13:57:01 +0000 Subject: [PATCH 111/126] chore: release v10.6.1 Fixes ===== - Flowchart: Fix a freeze when using a `(` character in an ellipse node --- packages/mermaid/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 7d218d4aa6..17f60d879f 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "10.6.0", + "version": "10.6.1", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs", From 396ea3cec2e541199c817bd863a8c7b24ee17a8e Mon Sep 17 00:00:00 2001 From: Aakansha Doshi <aakansha1216@gmail.com> Date: Mon, 6 Nov 2023 19:55:53 +0530 Subject: [PATCH 112/126] Update demos/sequence.html --- demos/sequence.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demos/sequence.html b/demos/sequence.html index d7bce2fef2..3345fed17a 100644 --- a/demos/sequence.html +++ b/demos/sequence.html @@ -181,7 +181,7 @@ <h1>Sequence diagram demos</h1> flowchart: { curve: 'basis' }, gantt: { axisFormat: '%m/%d/%Y' }, sequence: { actorMargin: 50 }, - // sequenceDiagram: { actorMargin: 300 }, // deprecated + // sequenceDiagram: { actorMargin: 300 } // deprecated }); </script> </body> From 6e74e91b5d297160c382a453fc8835433883d91d Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 7 Nov 2023 05:11:34 +0000 Subject: [PATCH 113/126] chore(deps): update all patch dependencies --- packages/mermaid/src/docs/package.json | 2 +- pnpm-lock.yaml | 105 ++++++------------------- 2 files changed, 26 insertions(+), 81 deletions(-) diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index 1845b02c29..87777eb9fe 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -32,7 +32,7 @@ "unplugin-vue-components": "^0.25.0", "vite": "^4.3.9", "vite-plugin-pwa": "^0.16.0", - "vitepress": "1.0.0-rc.24", + "vitepress": "1.0.0-rc.25", "workbox-window": "^7.0.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c95afd6f56..1106439c89 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -475,8 +475,8 @@ importers: specifier: ^0.16.0 version: 0.16.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0) vitepress: - specifier: 1.0.0-rc.24 - version: 1.0.0-rc.24(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6) + specifier: 1.0.0-rc.25 + version: 1.0.0-rc.25(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6) workbox-window: specifier: ^7.0.0 version: 7.0.0 @@ -1308,11 +1308,11 @@ packages: /@babel/helper-validator-identifier@7.22.20: resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==} engines: {node: '>=6.9.0'} - dev: true /@babel/helper-validator-identifier@7.22.5: resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==} engines: {node: '>=6.9.0'} + dev: true /@babel/helper-validator-option@7.22.5: resolution: {integrity: sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==} @@ -1362,7 +1362,7 @@ packages: engines: {node: '>=6.0.0'} hasBin: true dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 /@babel/parser@7.23.0: resolution: {integrity: sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==} @@ -1370,7 +1370,6 @@ packages: hasBin: true dependencies: '@babel/types': 7.23.0 - dev: true /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.5(@babel/core@7.22.10): resolution: {integrity: sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==} @@ -2282,14 +2281,6 @@ packages: - supports-color dev: true - /@babel/types@7.22.10: - resolution: {integrity: sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/helper-string-parser': 7.22.5 - '@babel/helper-validator-identifier': 7.22.5 - to-fast-properties: 2.0.0 - /@babel/types@7.23.0: resolution: {integrity: sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==} engines: {node: '>=6.9.0'} @@ -2297,7 +2288,6 @@ packages: '@babel/helper-string-parser': 7.22.5 '@babel/helper-validator-identifier': 7.22.20 to-fast-properties: 2.0.0 - dev: true /@bcherny/json-schema-ref-parser@9.0.9: resolution: {integrity: sha512-vmEmnJCfpkLdas++9OYg6riIezTYqTHpqUTODJzHLzs5UnXujbOJW9VwcVCnyo1mVRt32FRr23iXBx/sX8YbeQ==} @@ -5269,7 +5259,7 @@ packages: /@vitest/snapshot@0.34.0: resolution: {integrity: sha512-eGN5XBZHYOghxCOQbf8dcn6/3g7IW77GOOOC/mNFYwRXsPeoQgcgWnhj+6wgJ04pVv25wpxWL9jUkzaQ7LoFtg==} dependencies: - magic-string: 0.30.4 + magic-string: 0.30.5 pathe: 1.1.1 pretty-format: 29.6.2 dev: true @@ -5308,7 +5298,7 @@ packages: peerDependencies: vue: 3.3.4 dependencies: - '@babel/parser': 7.22.10 + '@babel/parser': 7.23.0 estree-walker: 2.0.2 source-map-js: 1.0.2 vue: 3.3.4 @@ -5396,11 +5386,11 @@ packages: /@vue/reactivity-transform@3.3.4: resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==} dependencies: - '@babel/parser': 7.22.10 + '@babel/parser': 7.23.0 '@vue/compiler-core': 3.3.4 '@vue/shared': 3.3.4 estree-walker: 2.0.2 - magic-string: 0.30.2 + magic-string: 0.30.5 /@vue/reactivity-transform@3.3.7: resolution: {integrity: sha512-APhRmLVbgE1VPGtoLQoWBJEaQk4V8JUsqrQihImVqKT+8U6Qi3t5ATcg4Y9wGAPb3kIhetpufyZ1RhwbZCIdDA==} @@ -11805,19 +11795,11 @@ packages: dependencies: '@jridgewell/sourcemap-codec': 1.4.15 - /magic-string@0.30.4: - resolution: {integrity: sha512-Q/TKtsC5BPm0kGqgBIF9oXAs/xEf2vRKiIB4wCRQTJOQIByZ1d+NnUOotvJOvNpi5RNIgVOMC3pOuaP1ZTDlVg==} - engines: {node: '>=12'} - dependencies: - '@jridgewell/sourcemap-codec': 1.4.15 - dev: true - /magic-string@0.30.5: resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==} engines: {node: '>=12'} dependencies: '@jridgewell/sourcemap-codec': 1.4.15 - dev: true /make-dir@3.1.0: resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==} @@ -13275,29 +13257,29 @@ packages: trouter: 2.0.1 dev: true - /postcss-import@15.1.0(postcss@8.4.27): + /postcss-import@15.1.0(postcss@8.4.31): resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} peerDependencies: postcss: ^8.0.0 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.4 dev: false - /postcss-js@4.0.1(postcss@8.4.27): + /postcss-js@4.0.1(postcss@8.4.31): resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16} peerDependencies: postcss: ^8.4.21 dependencies: camelcase-css: 2.0.1 - postcss: 8.4.27 + postcss: 8.4.31 dev: false - /postcss-load-config@4.0.1(postcss@8.4.27)(ts-node@10.9.1): + /postcss-load-config@4.0.1(postcss@8.4.31)(ts-node@10.9.1): resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==} engines: {node: '>= 14'} peerDependencies: @@ -13310,18 +13292,18 @@ packages: optional: true dependencies: lilconfig: 2.1.0 - postcss: 8.4.27 + postcss: 8.4.31 ts-node: 10.9.1(@types/node@18.17.5)(typescript@5.1.6) yaml: 2.3.1 dev: false - /postcss-nested@6.0.1(postcss@8.4.27): + /postcss-nested@6.0.1(postcss@8.4.31): resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} engines: {node: '>=12.0'} peerDependencies: postcss: ^8.2.14 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 postcss-selector-parser: 6.0.13 dev: false @@ -13352,7 +13334,6 @@ packages: nanoid: 3.3.6 picocolors: 1.0.0 source-map-js: 1.0.2 - dev: true /preact@10.16.0: resolution: {integrity: sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA==} @@ -14797,11 +14778,11 @@ packages: normalize-path: 3.0.0 object-hash: 3.0.0 picocolors: 1.0.0 - postcss: 8.4.27 - postcss-import: 15.1.0(postcss@8.4.27) - postcss-js: 4.0.1(postcss@8.4.27) - postcss-load-config: 4.0.1(postcss@8.4.27)(ts-node@10.9.1) - postcss-nested: 6.0.1(postcss@8.4.27) + postcss: 8.4.31 + postcss-import: 15.1.0(postcss@8.4.31) + postcss-js: 4.0.1(postcss@8.4.31) + postcss-load-config: 4.0.1(postcss@8.4.31)(ts-node@10.9.1) + postcss-nested: 6.0.1(postcss@8.4.31) postcss-selector-parser: 6.0.13 resolve: 1.22.4 sucrase: 3.34.0 @@ -15686,7 +15667,7 @@ packages: mlly: 1.4.0 pathe: 1.1.1 picocolors: 1.0.0 - vite: 4.4.11(@types/node@18.17.5) + vite: 4.5.0(@types/node@18.17.5) transitivePeerDependencies: - '@types/node' - less @@ -15730,42 +15711,6 @@ packages: - supports-color dev: true - /vite@4.4.11(@types/node@18.17.5): - resolution: {integrity: sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==} - engines: {node: ^14.18.0 || >=16.0.0} - hasBin: true - peerDependencies: - '@types/node': '>= 14' - less: '*' - lightningcss: ^1.21.0 - sass: '*' - stylus: '*' - sugarss: '*' - terser: ^5.4.0 - peerDependenciesMeta: - '@types/node': - optional: true - less: - optional: true - lightningcss: - optional: true - sass: - optional: true - stylus: - optional: true - sugarss: - optional: true - terser: - optional: true - dependencies: - '@types/node': 18.17.5 - esbuild: 0.18.20 - postcss: 8.4.27 - rollup: 3.28.0 - optionalDependencies: - fsevents: 2.3.2 - dev: true - /vite@4.4.9(@types/node@18.17.5): resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==} engines: {node: ^14.18.0 || >=16.0.0} @@ -15832,7 +15777,7 @@ packages: dependencies: '@types/node': 18.17.5 esbuild: 0.18.20 - postcss: 8.4.27 + postcss: 8.4.31 rollup: 3.28.0 optionalDependencies: fsevents: 2.3.2 @@ -15886,8 +15831,8 @@ packages: - terser dev: true - /vitepress@1.0.0-rc.24(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6): - resolution: {integrity: sha512-RpnL8cnOGwiRlBbrYQUm9sYkJbtyOt/wYXk2diTcokY4yvks/5lq9LuSt+MURWB6ZqwpSNHvTmxgaSfLoG0/OA==} + /vitepress@1.0.0-rc.25(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6): + resolution: {integrity: sha512-1dqWiHNThNrVZ08ixmfEDBEH+764KOgnev9oXga/x6cN++Vb9pnuu8p3K6DQP+KZrYcG+WiX7jxal0iSNpAWuQ==} hasBin: true peerDependencies: markdown-it-mathjax3: ^4.3.2 From c9ace33cf15a984a139176a3e2419b1c354d1923 Mon Sep 17 00:00:00 2001 From: dev1 <dev1@gmail.com> Date: Wed, 8 Nov 2023 14:39:06 +0700 Subject: [PATCH 114/126] Add new Atlassian integrations --- .../mermaid/src/docs/ecosystem/integrations-community.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md index da53f363fc..92491519b5 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations-community.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md @@ -40,6 +40,12 @@ Below are a list of community plugins and integrations created with Mermaid. - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf) - [LiveBook](https://livebook.dev) ✅ - [Atlassian Products](https://www.atlassian.com) + - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview) + - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview) + - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview) + - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview) + - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview) + - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview) - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/) - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/) - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview) From adfb60e045edf50ca04073b9da20e0effc9ccf52 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Thu, 9 Nov 2023 14:03:38 +0530 Subject: [PATCH 115/126] fix typo --- docs/ecosystem/integrations-community.md | 6 ++++++ docs/intro/index.md | 2 +- docs/syntax/classDiagram.md | 2 -- packages/mermaid/src/docs/syntax/c4.md | 2 +- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index a14d615b26..e979544cff 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -42,6 +42,12 @@ Below are a list of community plugins and integrations created with Mermaid. - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf) - [LiveBook](https://livebook.dev) ✅ - [Atlassian Products](https://www.atlassian.com) + - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview) + - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview) + - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview) + - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview) + - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview) + - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview) - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/) - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/) - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview) diff --git a/docs/intro/index.md b/docs/intro/index.md index 808465ff19..5a77fa5874 100644 --- a/docs/intro/index.md +++ b/docs/intro/index.md @@ -340,7 +340,7 @@ To Deploy Mermaid: </script> ``` -**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.** +**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries to read the diagram/chart definitions and render them into SVG charts.** **Examples can be found in** [Other examples](../syntax/examples.md) diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md index a6109149a1..2f2c3da888 100644 --- a/docs/syntax/classDiagram.md +++ b/docs/syntax/classDiagram.md @@ -425,8 +425,6 @@ And `Link` can be one of: A namespace groups classes. -Code: - ```mermaid-example classDiagram namespace BaseShapes { diff --git a/packages/mermaid/src/docs/syntax/c4.md b/packages/mermaid/src/docs/syntax/c4.md index be13323ea9..b6ee5fb795 100644 --- a/packages/mermaid/src/docs/syntax/c4.md +++ b/packages/mermaid/src/docs/syntax/c4.md @@ -257,7 +257,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60") title Component diagram for Internet Banking System - API Application Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.") - Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.") + Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.") ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") From 72038a68a9ed300a14fbb5fee8d91c938abb54b9 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Thu, 9 Nov 2023 14:06:58 +0530 Subject: [PATCH 116/126] Fix typo --- docs/syntax/flowchart.md | 2 +- packages/mermaid/src/docs/ecosystem/integrations-community.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 1bdce6aa63..d9ddf0cbe4 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -467,7 +467,7 @@ flowchart TB A & B--> C & D ``` -If you describe the same diagram using the the basic syntax, it will take four lines. A +If you describe the same diagram using the basic syntax, it will take four lines. A word of warning, one could go overboard with this making the flowchart harder to read in markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little. This goes for expressive syntaxes as well. diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md index 6a27f102f9..f6ffd908fb 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations-community.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md @@ -41,7 +41,7 @@ Below are a list of community plugins and integrations created with Mermaid. - [LiveBook](https://livebook.dev) ✅ - [Atlassian Products](https://www.atlassian.com) - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview) - - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview) + - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview) - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview) - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview) - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview) From 4a92fc5c921e6c0df350705ee46407a090d3daea Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Thu, 9 Nov 2023 14:20:06 +0530 Subject: [PATCH 117/126] Fix lint --- packages/mermaid/src/diagrams/flowchart/flowDb.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index f224c9bace..da67248f12 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -425,7 +425,7 @@ const setupToolTips = function (element) { tooltipElem .text(el.attr('title')) .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px') - .style('top', window.scrollY + rect.bottom + 'px'); + .style('top', window.scrollY + rect.bottom + 'px'); tooltipElem.html(tooltipElem.html().replace(/<br\/>/g, '<br/>')); el.classed('hover', true); }) From f47e920a97d0fd70a3213ead996c2485b7368c8f Mon Sep 17 00:00:00 2001 From: Andreas Deininger <adeininger@urbanonline.de> Date: Thu, 9 Nov 2023 12:50:01 +0100 Subject: [PATCH 118/126] Documentation: clarify sentence --- packages/mermaid/src/docs/config/configuration.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/docs/config/configuration.md b/packages/mermaid/src/docs/config/configuration.md index dcbdcf8757..1eb7836a69 100644 --- a/packages/mermaid/src/docs/config/configuration.md +++ b/packages/mermaid/src/docs/config/configuration.md @@ -4,8 +4,8 @@ When mermaid starts, configuration is extracted to determine a configuration to - The default configuration - Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**. -- Frontmatter (v10.5.0+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config. -- Directives (Deprecated by Frontmatter) - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config. +- Frontmatter (v10.5.0+) - diagram authors can update selected configuration parameters in the frontmatter of the diagram. These are applied to the render config. +- Directives (Deprecated by Frontmatter) - diagram authors can update selected configuration parameters directly in the diagram code via directives. These are applied to the render config. **The render config** is configuration that is used when rendering by applying these configurations. From fe32bcbf7c373242d824a14b6a9c107830e9bdc0 Mon Sep 17 00:00:00 2001 From: deining <deining@users.noreply.github.com> Date: Thu, 9 Nov 2023 11:55:19 +0000 Subject: [PATCH 119/126] Update docs --- docs/config/configuration.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/config/configuration.md b/docs/config/configuration.md index eb703a9d29..05fcd9d468 100644 --- a/docs/config/configuration.md +++ b/docs/config/configuration.md @@ -10,8 +10,8 @@ When mermaid starts, configuration is extracted to determine a configuration to - The default configuration - Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**. -- Frontmatter (v10.5.0+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config. -- Directives (Deprecated by Frontmatter) - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config. +- Frontmatter (v10.5.0+) - diagram authors can update selected configuration parameters in the frontmatter of the diagram. These are applied to the render config. +- Directives (Deprecated by Frontmatter) - diagram authors can update selected configuration parameters directly in the diagram code via directives. These are applied to the render config. **The render config** is configuration that is used when rendering by applying these configurations. From 6fb5641afc70916dd335a7a2e6372387bc2d6776 Mon Sep 17 00:00:00 2001 From: Andreas Deininger <adeininger@urbanonline.de> Date: Thu, 9 Nov 2023 12:56:57 +0100 Subject: [PATCH 120/126] Bump GitHub workflow actions to latest versions --- .github/workflows/build-docs.yml | 4 ++-- .github/workflows/build.yml | 4 ++-- .github/workflows/check-readme-in-sync.yml | 2 +- .github/workflows/checks.yml | 2 +- .github/workflows/codeql.yml | 2 +- .github/workflows/dependency-review.yml | 4 ++-- .github/workflows/e2e-applitools.yml | 4 ++-- .github/workflows/e2e.yml | 4 ++-- .github/workflows/link-checker.yml | 2 +- .github/workflows/lint.yml | 4 ++-- .github/workflows/pr-labeler-config-validator.yml | 2 +- .github/workflows/publish-docs.yml | 4 ++-- .github/workflows/release-preview-publish.yml | 4 ++-- .github/workflows/release-publish.yml | 4 ++-- .github/workflows/test.yml | 4 ++-- .github/workflows/update-browserlist.yml | 2 +- 16 files changed, 26 insertions(+), 26 deletions(-) diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml index 6fc629c7ae..acfb1887e9 100644 --- a/.github/workflows/build-docs.yml +++ b/.github/workflows/build-docs.yml @@ -16,12 +16,12 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - uses: pnpm/action-setup@v2 - name: Setup Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: pnpm node-version: 18 diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index eeb557ebb9..605dea9ab3 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -19,13 +19,13 @@ jobs: matrix: node-version: [18.x] steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - name: Setup Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: pnpm node-version: ${{ matrix.node-version }} diff --git a/.github/workflows/check-readme-in-sync.yml b/.github/workflows/check-readme-in-sync.yml index 5a8ca319b2..ad6df66b50 100644 --- a/.github/workflows/check-readme-in-sync.yml +++ b/.github/workflows/check-readme-in-sync.yml @@ -18,7 +18,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout repository - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Check for difference in README.md and docs/README.md run: | diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml index 9f9f316c40..012fbf19d5 100644 --- a/.github/workflows/checks.yml +++ b/.github/workflows/checks.yml @@ -15,7 +15,7 @@ jobs: name: check tests if: github.repository_owner == 'mermaid-js' steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: fetch-depth: 0 - uses: testomatio/check-tests@stable diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 26cb2db268..f8c50f47fa 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -29,7 +29,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@v3 + uses: actions/checkout@v4 # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL diff --git a/.github/workflows/dependency-review.yml b/.github/workflows/dependency-review.yml index 34b14c395b..4e75197790 100644 --- a/.github/workflows/dependency-review.yml +++ b/.github/workflows/dependency-review.yml @@ -1,6 +1,6 @@ # Dependency Review Action # -# This Action will scan dependency manifest files that change as part of a Pull Reqest, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging. +# This Action will scan dependency manifest files that change as part of a Pull Request, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging. # # Source repository: https://github.com/actions/dependency-review-action # Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement @@ -15,6 +15,6 @@ jobs: runs-on: ubuntu-latest steps: - name: 'Checkout Repository' - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: 'Dependency Review' uses: actions/dependency-review-action@v3 diff --git a/.github/workflows/e2e-applitools.yml b/.github/workflows/e2e-applitools.yml index 5b19431421..543fb5dbb4 100644 --- a/.github/workflows/e2e-applitools.yml +++ b/.github/workflows/e2e-applitools.yml @@ -30,13 +30,13 @@ jobs: run: | echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this run." - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - name: Setup Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index 3e6966677b..71806a9c46 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -17,13 +17,13 @@ jobs: node-version: [18.x] containers: [1, 2, 3, 4] steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - name: Setup Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} diff --git a/.github/workflows/link-checker.yml b/.github/workflows/link-checker.yml index 70580bfff1..c3e2ee44fe 100644 --- a/.github/workflows/link-checker.yml +++ b/.github/workflows/link-checker.yml @@ -26,7 +26,7 @@ jobs: # lychee only uses the GITHUB_TOKEN to avoid rate-limiting contents: read steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Restore lychee cache uses: actions/cache@v3 diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index f59c8af31d..f0c5560a1e 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -20,13 +20,13 @@ jobs: matrix: node-version: [18.x] steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - name: Setup Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: pnpm node-version: ${{ matrix.node-version }} diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml index ff5d8d0a1f..8bdfed21bc 100644 --- a/.github/workflows/pr-labeler-config-validator.yml +++ b/.github/workflows/pr-labeler-config-validator.yml @@ -16,7 +16,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout Repository - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Validate Configuration uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3 with: diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml index f63e587502..05cd68aff1 100644 --- a/.github/workflows/publish-docs.yml +++ b/.github/workflows/publish-docs.yml @@ -23,12 +23,12 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - uses: pnpm/action-setup@v2 - name: Setup Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: pnpm node-version: 18 diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml index 221e3836ee..c6503847d9 100644 --- a/.github/workflows/release-preview-publish.yml +++ b/.github/workflows/release-preview-publish.yml @@ -9,14 +9,14 @@ jobs: publish-preview: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: fetch-depth: 0 - uses: pnpm/action-setup@v2 - name: Setup Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: pnpm node-version: 18.x diff --git a/.github/workflows/release-publish.yml b/.github/workflows/release-publish.yml index eb28fe9c8d..69ef749402 100644 --- a/.github/workflows/release-publish.yml +++ b/.github/workflows/release-publish.yml @@ -8,14 +8,14 @@ jobs: publish: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - uses: fregante/setup-git-user@v2 - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - name: Setup Node.js v18 - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: pnpm node-version: 18.x diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 7c32795e8d..a18b31c9cd 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -12,13 +12,13 @@ jobs: matrix: node-version: [18.x] steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - name: Setup Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: pnpm node-version: ${{ matrix.node-version }} diff --git a/.github/workflows/update-browserlist.yml b/.github/workflows/update-browserlist.yml index 813a400b36..0a83df795d 100644 --- a/.github/workflows/update-browserlist.yml +++ b/.github/workflows/update-browserlist.yml @@ -8,7 +8,7 @@ jobs: update-browser-list: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - run: npx browserslist@latest --update-db - name: Commit changes uses: EndBug/add-and-commit@v9 From 01bbcc597af5c20e03847e3fdadc0fe3f9b6b731 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi <aakansha1216@gmail.com> Date: Thu, 9 Nov 2023 17:49:25 +0530 Subject: [PATCH 121/126] draw top actors with lines first followed by messages --- .../mermaid/src/diagrams/sequence/sequenceRenderer.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts index b8962395ee..7c38a80163 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts +++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts @@ -829,6 +829,11 @@ export const draw = function (_text: string, id: string, _version: string, diagO bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos); } + log.debug('createdActors', createdActors); + log.debug('destroyedActors', destroyedActors); + + drawActors(diagram, actors, actorKeys, false); + // Draw the messages/signals let sequenceIndex = 1; let sequenceIndexStep = 1; @@ -1028,14 +1033,12 @@ export const draw = function (_text: string, id: string, _version: string, diagO } }); - log.debug('createdActors', createdActors); - log.debug('destroyedActors', destroyedActors); - - drawActors(diagram, actors, actorKeys, false); messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj)); + if (conf.mirrorActors) { drawActors(diagram, actors, actorKeys, true); } + backgrounds.forEach((e) => svgDraw.drawBackgroundRect(diagram, e)); fixLifeLineHeights(diagram, actors, actorKeys, conf); From a8fe640546fc74f5961c44cb7a92ca9cf1c71e3d Mon Sep 17 00:00:00 2001 From: Justin Greywolf <jgreywolf@users.noreply.github.com> Date: Thu, 9 Nov 2023 06:57:51 -0800 Subject: [PATCH 122/126] update edge ids --- packages/mermaid/src/diagrams/class/classRenderer-v2.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts index 25712153c4..00688d366e 100644 --- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts +++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts @@ -231,7 +231,7 @@ export const addRelations = function (relations: ClassRelation[], g: graphlib.Gr //Set relationship style and line type classes: 'relation', pattern: edge.relation.lineType == 1 ? 'dashed' : 'solid', - id: 'id' + cnt, + id: 'id_' + edge.id1 + '_' + edge.id2 + '_' + cnt, // Set link type for rendering arrowhead: edge.type === 'arrow_open' ? 'none' : 'normal', //Set edge extra labels From 0f2b941e2d5608df90bfec934180cb8c2a49597a Mon Sep 17 00:00:00 2001 From: Justin Greywolf <jgreywolf@users.noreply.github.com> Date: Thu, 9 Nov 2023 08:05:09 -0800 Subject: [PATCH 123/126] Update packages/mermaid/src/diagrams/class/classRenderer-v2.ts Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com> --- packages/mermaid/src/diagrams/class/classRenderer-v2.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts index 00688d366e..97106a169d 100644 --- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts +++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts @@ -231,7 +231,7 @@ export const addRelations = function (relations: ClassRelation[], g: graphlib.Gr //Set relationship style and line type classes: 'relation', pattern: edge.relation.lineType == 1 ? 'dashed' : 'solid', - id: 'id_' + edge.id1 + '_' + edge.id2 + '_' + cnt, + id: `id_${edge.id1}_${edge.id2}_${cnt}`, // Set link type for rendering arrowhead: edge.type === 'arrow_open' ? 'none' : 'normal', //Set edge extra labels From 3c13386e5dd3cd640bb3203a62d274b7799afc9c Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Thu, 9 Nov 2023 23:44:35 +0530 Subject: [PATCH 124/126] Update packages/mermaid/src/docs/community/questions-and-suggestions.md --- .../mermaid/src/docs/community/questions-and-suggestions.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/mermaid/src/docs/community/questions-and-suggestions.md b/packages/mermaid/src/docs/community/questions-and-suggestions.md index b18a83ab59..386e3753a1 100644 --- a/packages/mermaid/src/docs/community/questions-and-suggestions.md +++ b/packages/mermaid/src/docs/community/questions-and-suggestions.md @@ -5,8 +5,7 @@ ## First search to see if someone has already asked (and hopefully been answered) or suggested the same thing. - [Search in Discussions](https://github.com/orgs/mermaid-js/discussions) -- [Search in open Issues](https://github.com/mermaid-js/mermaid/issues?q=is%3Aopen+is%3Aissue) -- [Search in closed Issues](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aclosed) +- [Search in Issues (Open & Closed)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue) If you find an open issue or discussion thread that is similar to your question but isn't answered, you can let us know that you are also interested in it. Use the GitHub reactions to add a thumbs-up to the issue or discussion thread. From aa5d586bd64c3aa8e42f6ea60bcd22109b8b4083 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Thu, 9 Nov 2023 23:51:12 +0530 Subject: [PATCH 125/126] Fix docs --- docs/community/questions-and-suggestions.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/community/questions-and-suggestions.md b/docs/community/questions-and-suggestions.md index 23d6de50f3..badb53a35a 100644 --- a/docs/community/questions-and-suggestions.md +++ b/docs/community/questions-and-suggestions.md @@ -10,9 +10,8 @@ ## First search to see if someone has already asked (and hopefully been answered) or suggested the same thing. -- Search in Discussions -- Search in open Issues -- Search in closed Issues +- [Search in Discussions](https://github.com/orgs/mermaid-js/discussions) +- [Search in Issues (Open & Closed)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue) If you find an open issue or discussion thread that is similar to your question but isn't answered, you can let us know that you are also interested in it. Use the GitHub reactions to add a thumbs-up to the issue or discussion thread. From adff22c1e2f5c73a1dd0f7b3c8b39fc7c5cb57d9 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 13 Nov 2023 17:15:43 +0000 Subject: [PATCH 126/126] Update all patch dependencies --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 098e91c30d..d2ca53ce02 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "10.2.4", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", - "packageManager": "pnpm@8.10.2", + "packageManager": "pnpm@8.10.4", "keywords": [ "diagram", "markdown",