From 14e290bf1a2b643cc65c863ea8ebcad93c76feea Mon Sep 17 00:00:00 2001 From: Subhash Halder Date: Sat, 20 May 2023 19:32:20 +0530 Subject: [PATCH 01/60] 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 02/60] 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 03/60] 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 04/60] 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 05/60] 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 06/60] 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 07/60] 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 08/60] 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 09/60] 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 10/60] 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 11/60] 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 12/60] 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 13/60] 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 14/60] 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 15/60] 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 16/60] 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 17/60] 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 18/60] 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 19/60] 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 20/60] 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 21/60] 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 22/60] 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 23/60] 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 24/60] 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 25/60] 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 26/60] 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 27/60] 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 28/60] 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 29/60] 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 30/60] 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 31/60] 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 32/60] 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 33/60] 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 34/60] 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 35/60] 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 36/60] 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 37/60] 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 38/60] 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 39/60] 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 40/60] 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 41/60] 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 42/60] 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 fd2c2f7af397fae43cbeffa149c03b18c47cfd24 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 25 Sep 2023 07:43:56 +0000 Subject: [PATCH 43/60] chore(deps): update all patch dependencies --- packages/mermaid/src/docs/package.json | 2 +- pnpm-lock.yaml | 20 ++++++++++++++++---- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index ea735d1066..ff8a03d5df 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.14", + "vitepress": "1.0.0-rc.20", "workbox-window": "^7.0.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bec2b603ec..8dc223204d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -475,8 +475,8 @@ importers: specifier: ^0.16.0 version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0) vitepress: - specifier: 1.0.0-rc.14 - version: 1.0.0-rc.14(@algolia/client-search@4.19.1)(@types/node@18.16.0)(search-insights@2.6.0) + specifier: 1.0.0-rc.20 + version: 1.0.0-rc.20(@algolia/client-search@4.19.1)(@types/node@18.16.0)(postcss@8.4.27)(search-insights@2.6.0) workbox-window: specifier: ^7.0.0 version: 7.0.0 @@ -4682,6 +4682,13 @@ packages: '@types/mdurl': 1.0.2 dev: true + /@types/markdown-it@13.0.1: + resolution: {integrity: sha512-SUEb8Frsxs3D5Gg9xek6i6EG6XQ5s+O+ZdQzIPESZVZw3Pv3CPQfjCJBI+RgqZd1IBeu18S0Rn600qpPnEK37w==} + dependencies: + '@types/linkify-it': 3.0.2 + '@types/mdurl': 1.0.2 + dev: true + /@types/mdast@3.0.10: resolution: {integrity: sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==} dependencies: @@ -15611,23 +15618,28 @@ packages: - terser dev: true - /vitepress@1.0.0-rc.14(@algolia/client-search@4.19.1)(@types/node@18.16.0)(search-insights@2.6.0): - resolution: {integrity: sha512-yChIeXOAcNvVnSVjhziH1vte0uhKb00PuZf7KdIMfx3ixTMAz73Nn+6gREvCv0SdH+anteGUKz5eljv0ygcgGQ==} + /vitepress@1.0.0-rc.20(@algolia/client-search@4.19.1)(@types/node@18.16.0)(postcss@8.4.27)(search-insights@2.6.0): + resolution: {integrity: sha512-CykMUJ8JLxLcGWek0ew3wln4RYbsOd1+0YzXITTpajggpynm2S331TNkJVOkHrMRc6GYe3y4pS40GfgcW0ZwAw==} hasBin: true peerDependencies: markdown-it-mathjax3: ^4.3.2 + postcss: ^8.4.30 peerDependenciesMeta: markdown-it-mathjax3: optional: true + postcss: + optional: true dependencies: '@docsearch/css': 3.5.2 '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.6.0) + '@types/markdown-it': 13.0.1 '@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 mark.js: 8.11.1 minisearch: 6.1.0 + postcss: 8.4.27 shiki: 0.14.4 vite: 4.4.9(@types/node@18.16.0) vue: 3.3.4 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 44/60] 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 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 45/60] 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 46/60] 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 459f5a58a3e3c094c4020415beb772210cf22194 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Wed, 4 Oct 2023 00:32:30 -0700 Subject: [PATCH 47/60] Docs: Add Product Hunt info (#4900) * update card and announcements page * update integrations link and add product hunt badge * Revert navbar link change --------- Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com> --- docs/ecosystem/mermaid-chart.md | 4 ++++ docs/news/announcements.md | 16 +++++++++++++--- .../mermaid/src/docs/ecosystem/mermaid-chart.md | 4 ++++ packages/mermaid/src/docs/index.md | 7 ++++--- packages/mermaid/src/docs/news/announcements.md | 16 +++++++++++++--- 5 files changed, 38 insertions(+), 9 deletions(-) diff --git a/docs/ecosystem/mermaid-chart.md b/docs/ecosystem/mermaid-chart.md index 5a0fdc18d9..28c17e9d3f 100644 --- a/docs/ecosystem/mermaid-chart.md +++ b/docs/ecosystem/mermaid-chart.md @@ -6,6 +6,10 @@ # Mermaid Chart +<br /> + +<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid Chart - A smarter way to create diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> + ## About [Mermaid Chart](https://www.mermaidchart.com) was born out of the Mermaid open source project and was founded by Knut Sveidqvist together with Open Core Ventures. The lead developers from Mermaid have joined the company and there is a strong connection between the project we all love and Mermaid Chart. Mermaid Chart brings resources to the open source development of Mermaid and makes it possible to work with Mermaid professionally. diff --git a/docs/news/announcements.md b/docs/news/announcements.md index 19568afa46..98ca64421e 100644 --- a/docs/news/announcements.md +++ b/docs/news/announcements.md @@ -6,8 +6,18 @@ # Announcements -## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/) +<br /> -22 September 2023 · 7 mins +<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid Chart - A smarter way to create diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> -A git graph is one of the more useful forms of diagrams for developers and DevOps professionals. +## Calling all fans of Mermaid and Mermaid Chart! 🎉 + +We’ve officially made our Product Hunt debut, and would love any and all support from the community! + +[Click here](https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart) to check out our Product Hunt launch. + +Feel free to drop us a comment and let us know what you think. All new sign ups will receive a 30-day free trial of our Pro subscription, plus 25% off your first year. + +We’re on a mission to make text-based diagramming fun again. And we need your help to make that happen. + +Your support means the world to us. Thank you for being part of the diagramming movement. diff --git a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md index 7312299b41..7d0e90024e 100644 --- a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md +++ b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md @@ -4,6 +4,10 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress # Mermaid Chart +<br /> + +<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid Chart - A smarter way to create diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> + ## About [Mermaid Chart](https://www.mermaidchart.com) was born out of the Mermaid open source project and was founded by Knut Sveidqvist together with Open Core Ventures. The lead developers from Mermaid have joined the company and there is a strong connection between the project we all love and Mermaid Chart. Mermaid Chart brings resources to the open source development of Mermaid and makes it possible to work with Mermaid professionally. diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md index 8e92edd114..378e9dfaba 100644 --- a/packages/mermaid/src/docs/index.md +++ b/packages/mermaid/src/docs/index.md @@ -9,6 +9,7 @@ hero: name: Mermaid text: Diagramming and charting tool tagline: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. + image: src: /mermaid-logo.svg alt: Mermaid @@ -30,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: 🥰 Mermaid + Mermaid Chart - details: Mermaid Chart is a major supporter of the Mermaid project. - link: https://www.mermaidchart.com/ + - 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 --- diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md index 8a8d000a5e..f14aab785c 100644 --- a/packages/mermaid/src/docs/news/announcements.md +++ b/packages/mermaid/src/docs/news/announcements.md @@ -1,7 +1,17 @@ # Announcements -## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/) +<br /> -22 September 2023 · 7 mins +<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid Chart - A smarter way to create diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> -A git graph is one of the more useful forms of diagrams for developers and DevOps professionals. +## Calling all fans of Mermaid and Mermaid Chart! 🎉 + +We’ve officially made our Product Hunt debut, and would love any and all support from the community! + +[Click here](https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart) to check out our Product Hunt launch. + +Feel free to drop us a comment and let us know what you think. All new sign ups will receive a 30-day free trial of our Pro subscription, plus 25% off your first year. + +We’re on a mission to make text-based diagramming fun again. And we need your help to make that happen. + +Your support means the world to us. Thank you for being part of the diagramming movement. From 6ef2b1ce1e8b62874b3919b3369f1d19dfdead42 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Wed, 4 Oct 2023 13:06:07 +0530 Subject: [PATCH 48/60] Fix 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 d17c75222935fc26d60c6547ae2d8ea1db3fe5f5 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Wed, 4 Oct 2023 14:06:43 +0530 Subject: [PATCH 49/60] Add TopBar --- docs/ecosystem/integrations-community.md | 4 +++- .../src/docs/.vitepress/components/TopBar.vue | 19 +++++++++++++++++++ .../src/docs/.vitepress/theme/index.ts | 4 ++++ 3 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 packages/mermaid/src/docs/.vitepress/components/TopBar.vue diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index b03e5581c7..bdfc7e441d 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -4,7 +4,9 @@ > > ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/integrations-community.md](../../packages/mermaid/src/docs/ecosystem/integrations-community.md). -# Integrations - community +# Integrations + +## Official integration: [Mermaid Chart](./mermaid-chart.md) We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created with Mermaid. diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue new file mode 100644 index 0000000000..6b0dcb44e4 --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue @@ -0,0 +1,19 @@ +<template> + <div + class="w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center justify-center p-1" + > + We've made our + <a + href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" + target="_blank" + class="unstyled font-semibold text-lg underline px-1" + >Product Hunt</a + > + debut!   + <a + href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" + target="_blank" + >Show us some love and help spread the word</a + >, plus receive 25% off on annual Pro subscription! + </div> +</template> diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts index ba1ac9bdb8..ae626558db 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/index.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts @@ -6,6 +6,9 @@ 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'; + import { getRedirect } from './redirect.js'; import { h } from 'vue'; @@ -18,6 +21,7 @@ export default { ...DefaultTheme, Layout() { return h(Theme.Layout, null, { + 'home-hero-before': () => h(TopBar), 'home-features-after': () => h(HomePage), }); }, From cda7a615261f8dde84359bdb6992ce0d5addf38f Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Wed, 4 Oct 2023 14:07:08 +0530 Subject: [PATCH 50/60] Add MC to integrations --- packages/mermaid/src/docs/ecosystem/integrations-community.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md index c26ea4373e..cd4cffe9b6 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations-community.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md @@ -2,7 +2,9 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress --- -# Integrations - community +# Integrations + +## Official integration: [Mermaid Chart](./mermaid-chart.md) We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created with Mermaid. From a6bb1ea28ce6700bb149c674b1ea3a5b4368ff4d Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Wed, 4 Oct 2023 14:09:34 +0530 Subject: [PATCH 51/60] Fix TopBar --- .../src/docs/.vitepress/components/TopBar.vue | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue index 6b0dcb44e4..d0a202c589 100644 --- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue +++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue @@ -1,19 +1,14 @@ <template> <div - class="w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center justify-center p-1" + class="w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white" > - We've made our <a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" target="_blank" - class="unstyled font-semibold text-lg underline px-1" - >Product Hunt</a > - debut!   - <a - href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" - target="_blank" - >Show us some love and help spread the word</a - >, plus receive 25% off on annual Pro subscription! + We've made our Product Hunt debut!   + <span class="underline">Show us some love and help spread the word</span>, plus receive 25% + off on annual Pro subscription!</a + > </div> </template> From f49e8c5784d07c0eacc70d40c46c3e2156908bb2 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Wed, 4 Oct 2023 14:19:19 +0530 Subject: [PATCH 52/60] Fix release version --- packages/mermaid/package.json | 2 +- packages/mermaid/scripts/update-release-version.mts | 1 + packages/mermaid/src/docs/config/configuration.md | 2 +- packages/mermaid/src/docs/config/directives.md | 2 +- packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md | 4 ++-- 5 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 5877cae7ef..10bb672706 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -40,7 +40,7 @@ "types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify", "checkCircle": "npx madge --circular ./src", "release": "pnpm build", - "prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm -w run build" + "prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm docs:release-version && pnpm -w run build" }, "repository": { "type": "git", diff --git a/packages/mermaid/scripts/update-release-version.mts b/packages/mermaid/scripts/update-release-version.mts index 7f292f21b2..abed18bc9a 100644 --- a/packages/mermaid/scripts/update-release-version.mts +++ b/packages/mermaid/scripts/update-release-version.mts @@ -22,6 +22,7 @@ const main = async () => { const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**'); const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]); mdFileGlobs.push('!**/community/development.md'); + mdFileGlobs.push('!**/community/code.md'); const mdFiles = await getFilesFromGlobs(mdFileGlobs); mdFiles.sort(); const mdFilesWithPlaceholder: string[] = []; diff --git a/packages/mermaid/src/docs/config/configuration.md b/packages/mermaid/src/docs/config/configuration.md index e52f2c6d5d..dcbdcf8757 100644 --- a/packages/mermaid/src/docs/config/configuration.md +++ b/packages/mermaid/src/docs/config/configuration.md @@ -4,7 +4,7 @@ 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 (v<MERMAID_RELEASE_VERSION>+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config. +- 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. **The render config** is configuration that is used when rendering by applying these configurations. diff --git a/packages/mermaid/src/docs/config/directives.md b/packages/mermaid/src/docs/config/directives.md index 7763eb0732..0e211161cc 100644 --- a/packages/mermaid/src/docs/config/directives.md +++ b/packages/mermaid/src/docs/config/directives.md @@ -1,7 +1,7 @@ # Directives ```warning -Directives are deprecated from v<MERMAID_RELEASE_VERSION>. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details. +Directives are deprecated from v10.5.0. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details. ``` ## Directives diff --git a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md index 82c6f1e488..1767e92d7c 100644 --- a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md +++ b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md @@ -56,7 +56,7 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to Where: -- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v<MERMAID_RELEASE_VERSION>+), and may also contain digits and hyphens. +- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v10.5.0+), and may also contain digits and hyphens. - `relationship` describes the way that both entities inter-relate. See below. - `second-entity` is the name of the other entity. - `relationship-label` describes the relationship from the perspective of the first entity. @@ -144,7 +144,7 @@ erDiagram The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types. -### Entity Name Aliases (v<MERMAID_RELEASE_VERSION>+) +### Entity Name Aliases (v10.5.0+) An alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name. From 345d0d0bd2cb93ec823fe0fd6ee0f6caf1cd5256 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Wed, 4 Oct 2023 14:26:03 +0530 Subject: [PATCH 53/60] Fix lint issue --- packages/mermaid/scripts/update-release-version.mts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/mermaid/scripts/update-release-version.mts b/packages/mermaid/scripts/update-release-version.mts index abed18bc9a..a5943b37bd 100644 --- a/packages/mermaid/scripts/update-release-version.mts +++ b/packages/mermaid/scripts/update-release-version.mts @@ -21,8 +21,7 @@ const versionPlaceholder = '<MERMAID_RELEASE_VERSION>'; const main = async () => { const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**'); const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]); - mdFileGlobs.push('!**/community/development.md'); - mdFileGlobs.push('!**/community/code.md'); + mdFileGlobs.push('!**/community/development.md', '!**/community/code.md'); const mdFiles = await getFilesFromGlobs(mdFileGlobs); mdFiles.sort(); const mdFilesWithPlaceholder: string[] = []; From 22b783e31dc74d6288f3200b37eacf2cff6e1fb3 Mon Sep 17 00:00:00 2001 From: sidharthv96 <sidharthv96@users.noreply.github.com> Date: Wed, 4 Oct 2023 09:01:57 +0000 Subject: [PATCH 54/60] Update docs --- docs/config/configuration.md | 2 +- docs/config/directives.md | 2 +- docs/syntax/entityRelationshipDiagram.md | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/config/configuration.md b/docs/config/configuration.md index 1e85427ea7..eb703a9d29 100644 --- a/docs/config/configuration.md +++ b/docs/config/configuration.md @@ -10,7 +10,7 @@ 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 (v\<MERMAID_RELEASE_VERSION>+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config. +- 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. **The render config** is configuration that is used when rendering by applying these configurations. diff --git a/docs/config/directives.md b/docs/config/directives.md index 943d512173..533126263a 100644 --- a/docs/config/directives.md +++ b/docs/config/directives.md @@ -7,7 +7,7 @@ # Directives > **Warning** -> Directives are deprecated from v\<MERMAID_RELEASE_VERSION>. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details. +> Directives are deprecated from v10.5.0. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details. ## Directives diff --git a/docs/syntax/entityRelationshipDiagram.md b/docs/syntax/entityRelationshipDiagram.md index 94e4048f03..b673ac1dd8 100644 --- a/docs/syntax/entityRelationshipDiagram.md +++ b/docs/syntax/entityRelationshipDiagram.md @@ -90,7 +90,7 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to Where: -- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v\<MERMAID_RELEASE_VERSION>+), and may also contain digits and hyphens. +- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v10.5.0+), and may also contain digits and hyphens. - `relationship` describes the way that both entities inter-relate. See below. - `second-entity` is the name of the other entity. - `relationship-label` describes the relationship from the perspective of the first entity. @@ -198,7 +198,7 @@ erDiagram The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types. -### Entity Name Aliases (v\<MERMAID_RELEASE_VERSION>+) +### Entity Name Aliases (v10.5.0+) An alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name. 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 55/60] 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 56/60] 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 57/60] 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 2bde5ad6673b96bd94b481ba6bb7d7be46508086 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Thu, 5 Oct 2023 21:37:57 +0530 Subject: [PATCH 58/60] fix: Reduce gantt exclude days length --- packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 55b5607a28..c1d14bb902 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -520,9 +520,9 @@ export const draw = function (text, id, version, diagObj) { return; } - if (dayjs(maxTime).diff(dayjs(minTime), 'year') > 5) { + if (dayjs(maxTime).diff(dayjs(minTime), 'year') > 1) { log.warn( - 'The difference between the min and max time is more than 5 years. This will cause performance issues. Skipping drawing exclude days.' + 'The difference between the min and max time is more than 1 years. This will cause performance issues. Skipping drawing exclude days.' ); return; } From c63ea3e987f1f883060509ee93e2601316322d2e Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov <nironame@gmail.com> Date: Fri, 6 Oct 2023 07:45:13 +0300 Subject: [PATCH 59/60] Commented out broken test (#4913) * Commented out bronken test * Skip test instead of commenting out * Fix * Update cypress/integration/rendering/gantt.spec.js Co-authored-by: Alois Klink <alois@aloisklink.com> --------- Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com> Co-authored-by: Alois Klink <alois@aloisklink.com> --- cypress/integration/rendering/gantt.spec.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index fea874003b..998a092c24 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -520,7 +520,15 @@ describe('Gantt diagram', () => { ); }); - it('should render a gantt diagram with very large intervals, skipping excludes if interval > 5 years', () => { + // TODO: fix it + // + // This test is skipped deliberately + // because it fails and blocks our development pipeline + // It was added as an attempt to fix gantt performance issues + // + // https://github.com/mermaid-js/mermaid/issues/3274 + // + it.skip('should render a gantt diagram with very large intervals, skipping excludes if interval > 5 years', () => { imgSnapshotTest( `gantt title A long Gantt Diagram @@ -528,7 +536,6 @@ describe('Gantt diagram', () => { axisFormat %m-%d tickInterval 1day excludes weekends - section Section A task : a1, 9999-10-01, 30d Another task : after a1, 20d From 157c90eeac828c8b90d4159d9ac6aa42f6d3f805 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Fri, 6 Oct 2023 10:49:09 +0530 Subject: [PATCH 60/60] Revert "fix: Reduce gantt exclude days length" This reverts commit 2bde5ad6673b96bd94b481ba6bb7d7be46508086. --- packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index c1d14bb902..55b5607a28 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -520,9 +520,9 @@ export const draw = function (text, id, version, diagObj) { return; } - if (dayjs(maxTime).diff(dayjs(minTime), 'year') > 1) { + if (dayjs(maxTime).diff(dayjs(minTime), 'year') > 5) { log.warn( - 'The difference between the min and max time is more than 1 years. This will cause performance issues. Skipping drawing exclude days.' + 'The difference between the min and max time is more than 5 years. This will cause performance issues. Skipping drawing exclude days.' ); return; }