From 14e290bf1a2b643cc65c863ea8ebcad93c76feea Mon Sep 17 00:00:00 2001 From: Subhash Halder Date: Sat, 20 May 2023 19:32:20 +0530 Subject: [PATCH 01/49] 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 abcfa0383..a99be67da 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 24c4fbf3b..c634aad2d 100644 --- a/demos/index.html +++ b/demos/index.html @@ -60,6 +60,9 @@

  • Quadrant charts

    • +
  • +

    XY charts

    +

  • Requirements

    • diff --git a/demos/xychart.html b/demos/xychart.html new file mode 100644 index 000000000..3fffd379a --- /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 9c03e27f3..b4dd2fd95 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 000000000..d8e0d08d0 --- /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 000000000..b4bbdc31e --- /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 000000000..968d1390d --- /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 000000000..d200adc59 --- /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 000000000..590ceed28 --- /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 000000000..a4caacf52 --- /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/49] 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 3fffd379a..6595b5673 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -25,7 +25,7 @@ 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 d04083baa..aa705532c 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 9c1162762..388d7a028 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 000000000..767a98262 --- /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 000000000..d59756921 --- /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 000000000..e83badc35 --- /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 000000000..de43859c7 --- /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 000000000..d9644d6af --- /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 000000000..dd908e283 --- /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 000000000..02c0bd644 --- /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 000000000..f7ff5cc69 --- /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 000000000..b60fea905 --- /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 000000000..5af28127d --- /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 000000000..d307b2957 --- /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 b4bbdc31e..000000000 --- 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 968d1390d..dcf66b1b2 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 a4caacf52..ee696377e 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 f258400a6..1cb943a0c 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/49] 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 | 67 +++--- .../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, 398 insertions(+), 176 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 767a98262..569a5d11c 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 d59756921..fdd60d634 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 e83badc35..c7a252609 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 de43859c7..51e27b0cd 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 d9644d6af..92f27986b 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 dd908e283..75a9ab643 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); + super.setRange(range); } - setOrientation(orientation: OrientationEnum): void { - this.orientation = orientation; + + 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()); + } + + getTickValues(): (string | number)[] { + return this.categories; } 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 []; + 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 000000000..14107da52 --- /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 02c0bd644..9bf7c33b0 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 f7ff5cc69..1972ef2c5 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 d307b2957..a47074e73 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 ee696377e..a871177ce 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/49] 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 569a5d11c..51350ca25 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 fdd60d634..dce2cefe9 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 51e27b0cd..f02d7b05f 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 14107da52..f6ed16caf 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 9bf7c33b0..7d46a46b0 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 b60fea905..c6bb8e408 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 000000000..d3eaf118d --- /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 5af28127d..fb91a053a 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 a47074e73..628965d44 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 a871177ce..dd9b27583 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/49] 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 51350ca25..c7a924edd 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 dce2cefe9..25e52cf24 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 f02d7b05f..46a1b51d0 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 92f27986b..000000000 --- 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 f6ed16caf..c341bd451 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 1972ef2c5..dafa91878 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 000000000..76187466b --- /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 fb91a053a..1c807276e 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 628965d44..2b7f59211 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/49] 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 c7a924edd..b7e29eb80 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 25e52cf24..f76ec9560 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 46a1b51d0..5c60e2a9e 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 c341bd451..618ac0c9a 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 dafa91878..75d199954 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 76187466b..6d29a81b6 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 c6bb8e408..d35722618 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 d3eaf118d..ee5f5e19c 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 1c807276e..92b3668f2 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 2b7f59211..834834f8e 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/49] 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 d8e0d08d0..66e160ac0 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 000000000..029e90356 --- /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/49] Added full jison for bar and line chart --- .../src/diagrams/xychart/parser/xychart.jison | 162 +++++++++++------- .../xychart/parser/xychart.jison.spec.ts | 58 ++++++- 2 files changed, 155 insertions(+), 65 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 66e160ac0..047eeebc5 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 */ +\%\%\{ { 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"; } +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"; +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';} +" "*"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';} +<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'; } +"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>[+-]?\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>[\[]" "* {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();} -<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'; +["][`] { 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 029e90356..1ce73abf3 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/49] 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 047eeebc5..0f211fe87 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 1ce73abf3..a999d9b8d 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/49] 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 6595b5673..13d5dfde9 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 df87e9c40..aa9f2b81e 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 b7e29eb80..e519d0a01 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 f76ec9560..b7ab4ca14 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 5c60e2a9e..ae7099471 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 75d199954..7888ac286 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 6d29a81b6..5b4a22f4a 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 d35722618..e342352b8 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 ee5f5e19c..2eb475d1f 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 92b3668f2..16a831fdd 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 834834f8e..7d71e78c7 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 0f211fe87..7c17d1e57 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 a999d9b8d..41d4f36db 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 dcf66b1b2..cc002405e 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/49] 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 13d5dfde9..e737545db 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -18,8 +18,10 @@ <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 @@ <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 7c17d1e57..1ecd6edf4 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 41d4f36db..2b96a63f7 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 cc002405e..19622c4a6 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/49] Improved space management for text --- .../xychart/chartBuilder/Orchestrator.ts | 4 +- .../chartBuilder/TextDimensionCalculator.ts | 56 ++++++++++++++++++- .../chartBuilder/components/ChartTitle.ts | 20 +++---- .../chartBuilder/components/axis/index.ts | 10 ++-- 4 files changed, 72 insertions(+), 18 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index b7ab4ca14..699879513 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 c7a252609..c717163ce 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 ae7099471..3cad0dea0 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 { - XYChartData, - Dimension, - BoundingRect, - DrawableElem, - Point, -} from '../Interfaces.js'; -import { ChartComponent } from '../Interfaces.js'; import { XYChartConfig } from '../../../../config.type.js'; +import { + BoundingRect, + ChartComponent, + Dimension, + DrawableElem, + Point, + XYChartData, +} from '../Interfaces.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 7888ac286..9953679f0 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/49] 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 e737545db..5803de4b8 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -20,8 +20,8 @@ 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 @@ 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 e519d0a01..fbcd87493 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 699879513..db440b07e 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 75a9ab643..9a5334097 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 618ac0c9a..861b6dd8e 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 7d46a46b0..39d054bfc 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 9953679f0..e48a0e845 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 5b4a22f4a..0348ef4b1 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 19622c4a6..b3f253af3 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/49] 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 b4dd2fd95..597474ce8 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 fbcd87493..fcf642508 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 db440b07e..5f187267c 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 c717163ce..ea77cf413 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 39d054bfc..a9b5d3bcb 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 16a831fdd..e9ebd8e92 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 b3f253af3..f4c704455 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 dd9b27583..41d3b3ad5 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 1cb943a0c..bd9cf4f29 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.5(@algolia/client-search@4.14.2) + '@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.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/49] 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 fcf642508..efee023ba 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 3cad0dea0..a9225e57d 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 861b6dd8e..f8245270b 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 e48a0e845..23df3cdba 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 0348ef4b1..dbb333b7b 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 2eb475d1f..ab4668999 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 e9ebd8e92..61016c021 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 7d71e78c7..badadf2aa 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 2b96a63f7..605793110 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 f4c704455..eb43d6315 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/49] Improved parsing to work for minimal configuration possible. --- demos/xychart.html | 6 +- .../xychart/chartBuilder/Interfaces.ts | 12 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 107 ++++++++++++++---- 3 files changed, 96 insertions(+), 29 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index 5803de4b8..ea24e4872 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -39,11 +39,9 @@ <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 efee023ba..54b7bc004 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 eb43d6315..a8d6971c8 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; +} + +// 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)) { + 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[]) { - if (isBandAxisData(xyChartData.xAxis)) { - xyChartData.plots.push({ - type: 'line', - strokeFill: '#00ff00', - strokeWidth: 2, - data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]), - }); - } + 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/49] 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/49] 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 bd9cf4f29..53d735b02 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/49] 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 aa9f2b81e..4a392673d 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 54b7bc004..6968dee48 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 5f187267c..d4c80b559 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 a9225e57d..0de677f25 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 9a5334097..6c354cd51 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 f8245270b..a9e551626 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 a9b5d3bcb..23acf3f2a 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 23df3cdba..f1a3df093 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 dbb333b7b..b11a6630b 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 e342352b8..c10b431a7 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 ab4668999..5796ae8da 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 61016c021..9e0f3cbb0 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 badadf2aa..80f3b364e 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 a8d6971c8..d70039f3a 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 3cd6bca4f..59362a54e 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 53d735b02..2ab5d09a7 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/49] 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 ea24e4872..3d0da3fb3 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -40,7 +40,11 @@ <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 6968dee48..ce7e33e8b 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 b11a6630b..7308adde1 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 c10b431a7..cd1533b1e 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 9e0f3cbb0..bb3b90bc7 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 d70039f3a..a818037f3 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 59362a54e..b274a4562 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/49] Simplified the jison file --- .../src/diagrams/xychart/parser/xychart.jison | 157 +++++-------- .../xychart/parser/xychart.jison.spec.ts | 216 ++++++++++++++---- .../mermaid/src/diagrams/xychart/xychartDb.ts | 23 +- 3 files changed, 240 insertions(+), 156 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 1ecd6edf4..743647df7 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"; +<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';} +"xychart-beta" {return 'XYCHART';} +("vertical"|"horizontal") {return 'CHART_ORIENTATION'} -"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();} +"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("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');} +"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 605793110..24c6f2891 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 a818037f3..8f1e80e61 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/49] 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 671a9612e..ad3d9863d 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 a55ec1808..93b0459c6 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 e81ea70ff..e6a273bfb 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 4a392673d..3548f0223 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 62b361cff..968153473 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 ce7e33e8b..843e02675 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 d4c80b559..1386f53cd 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 0de677f25..c224c8ebe 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 6c354cd51..bb826fbb4 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 a9e551626..3041ce13a 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 23acf3f2a..dec92f0bf 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 f1a3df093..5512e22e4 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 7308adde1..09149f254 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 cd1533b1e..4320b7608 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 5796ae8da..c87165d40 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 bb3b90bc7..680d19ece 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 80f3b364e..ce5bc4e77 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 8f1e80e61..6023898ec 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 6e5f48d95..c24a50ff5 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 b274a4562..c95d44371 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/49] 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 | 139 +++++----- .../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, 378 insertions(+), 285 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index 3d0da3fb3..ad7bf0944 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> <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 @@ 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 843e02675..32cd14d63 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 1386f53cd..e18eb92a3 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 ea77cf413..02d841322 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 c224c8ebe..6b3ec3c10 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 bb826fbb4..e55f81953 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 3041ce13a..e695600e2 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 dec92f0bf..f32585a6c 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 5512e22e4..a40de8237 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 09149f254..20d1af311 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 4320b7608..fe58b1ef4 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 680d19ece..e974da0e8 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 ce5bc4e77..2b308be2b 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 743647df7..705532727 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); } - ; - -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 {$$ = []} + | 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); } ; -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 {$$ = []} +plotData + : SQUARE_BRACES_START commaSeperateNumber SQUARE_BRACES_END { $$ = $commaSeperateNumber } ; +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));} ; -xAxisBandData - : SQUARE_BRACES_START text xAxisBandData {$xAxisBandData.unshift($text); $$ = $xAxisBandData} - | COMMA text xAxisBandData {$xAxisBandData.unshift($text); $$ = $xAxisBandData;} - | SQUARE_BRACES_END {$$ = []} +bandData + : SQUARE_BRACES_START commaSeperateText SQUARE_BRACES_END {$$ = $commaSeperateText} ; +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 24c6f2891..446d225ec 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 6023898ec..2a768777f 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 590ceed28..09bd51c2a 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 41d3b3ad5..b987bc746 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 871f3425e..417ee488c 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/49] 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 2a768777f..abdecfe28 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 b987bc746..6bade9ad2 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 090b005c3..223fb25ad 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/49] 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 705532727..6c5cb92a9 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 446d225ec..0515a4e94 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/49] 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 ad7bf0944..a7bd42614 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -54,7 +54,16 @@ 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 @@ 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 @@ 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 e695600e2..d076bc0a0 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/49] 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 32cd14d63..2c9247087 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 abdecfe28..455376266 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 6bade9ad2..384cf944b 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 ce1700d0b..90d5b1446 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 fd083e513..301255e0e 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 c95d44371..e95755947 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 65797b00c..3cdcdbdce 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 963ce031d..dbde17d98 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/49] 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 e18eb92a3..278869786 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 20d1af311..b0a62df1f 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 455376266..80d6ae635 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/49] 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 278869786..b89d1c94e 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 02d841322..2fd2d770e 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 6b3ec3c10..7a5bcf341 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 e55f81953..8c785cf72 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 d076bc0a0..977bf4e20 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 f32585a6c..6f0e2bdbb 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 a40de8237..a563ad686 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 b0a62df1f..e6b2e66e9 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 fe58b1ef4..e4ab886ea 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 c87165d40..3870f48e6 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 e974da0e8..027ba7c7a 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 2b308be2b..356f0b452 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 0515a4e94..09a62d8bd 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 80d6ae635..b8c7dd0a2 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 09bd51c2a..c4e913adc 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 384cf944b..8f999cb00 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/49] 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 a7bd42614..42992dd25 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 @@ 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 977bf4e20..7bbaf5749 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 6c5cb92a9..8666dda3b 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 09a62d8bd..6ccc06c58 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/49] 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 42992dd25..1a8d8c291 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -57,9 +57,17 @@ 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] y-axis yaxisText 10 --> 150 diff --git a/docs/intro/index.md b/docs/intro/index.md index b0e9c2671..384df43c5 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 000000000..7e4303ba9 --- /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 0ce1ceb80..77e3dbeb6 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 2c9247087..e23374aca 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 3870f48e6..8bddf04d0 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 ede064fa4..e30f91e13 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 7dda288dc..978edb2b7 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 000000000..5e65cb670 --- /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 4e9e0e532..d7f5cdae3 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 90d5b1446..f785d9e0c 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 301255e0e..b32750eac 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 e95755947..4ba78c805 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 3cdcdbdce..b75d7c944 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 dbde17d98..44bcb5e67 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/49] 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 1a8d8c291..4fc3a1249 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -66,7 +66,7 @@ <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 7e4303ba9..6ec12e9fe 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 b8c7dd0a2..297a2b30d 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 5e65cb670..060cf8ae8 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/49] 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 4fc3a1249..0d0bd8d00 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -92,6 +92,17 @@ 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 6ec12e9fe..477473156 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 77e3dbeb6..be20f2a4d 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 e23374aca..33eb4f227 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 b89d1c94e..b008c9a29 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 7a5bcf341..99ccbb6da 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 7bbaf5749..873455a3f 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 027ba7c7a..2d45d795c 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 8f999cb00..19d9d35e4 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 060cf8ae8..52b765a60 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 d7f5cdae3..da809985c 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 f785d9e0c..db7fd2ba1 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 b32750eac..c4354736b 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 4ba78c805..ea3d20a5a 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 b75d7c944..0b5300d67 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 44bcb5e67..26f84c38d 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/49] 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 0d0bd8d00..927047129 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -92,6 +92,20 @@ 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 477473156..4ee83bdba 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 33eb4f227..3d188895f 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 b008c9a29..256a103eb 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 99ccbb6da..18dd38b71 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 873455a3f..1f1699028 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 8bddf04d0..000000000 --- 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 2d45d795c..370792379 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 297a2b30d..b585b3ba0 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 19d9d35e4..8f8451d3f 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 52b765a60..2820bc791 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 db7fd2ba1..663af8501 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 c4354736b..300cf3036 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 ea3d20a5a..6aa18fcc7 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 0b5300d67..adf337a16 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 26f84c38d..446a9189d 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/49] 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 000000000..d9b7f159c --- /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/49] 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 | 56 +++----- .../src/diagrams/xychart/xychartDiagram.ts | 2 +- .../src/diagrams/xychart/xychartRenderer.ts | 14 +- 18 files changed, 271 insertions(+), 161 deletions(-) diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js index d9b7f159c..4199b02d8 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 927047129..8c74d0847 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -23,9 +23,8 @@ 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 @@ 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 @@ 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 @@ 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 @@ 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 @@ 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"> - %%{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: + 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"> +--- +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 256a103eb..75c0319bf 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 2fd2d770e..e9e98c9e3 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 18dd38b71..19dacc3ae 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 8c785cf72..864ef1316 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 1f1699028..18e48f54c 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 6f0e2bdbb..8107732d9 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 a563ad686..e4b42029d 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 e6b2e66e9..cf7d4e516 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 e4ab886ea..d8d0666de 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 370792379..94ab0127a 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 356f0b452..2dba84c2c 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 8666dda3b..987132d17 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 6ccc06c58..23fdb8ae8 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 b585b3ba0..72550ed55 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 { + clear as commonClear, + getAccDescription, + getAccTitle, + getDiagramTitle, + setAccDescription, + 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 { - setAccTitle, - getAccTitle, - setDiagramTitle, - getDiagramTitle, - getAccDescription, - setAccDescription, - clear as commonClear, -} from '../../commonDb.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 c4e913adc..2f09c10a2 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 8f8451d3f..90760008b 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/49] 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 4199b02d8..1fdb21aee 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 72550ed55..7bd27c1a9 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/49] 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 1fdb21aee..3948dc71e 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 8c74d0847..1d8bad78b 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -150,17 +150,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/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index 4ee83bdba..255c3c089 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 2820bc791..ef089eb43 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/49] 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 90760008b..1f4d36e8a 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/49] 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 3948dc71e..85d998c50 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 255c3c089..964a1e6da 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 18e48f54c..c3240a4a7 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 7bd27c1a9..7271c0468 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 ef089eb43..3b3060181 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/49] 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 08d03a434..a927ca541 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 3b3060181..ffd0c16c2 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/49] 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 a927ca541..7e91863f9 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 ffd0c16c2..8edfecbea 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/49] 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 ea735d106..ff8a03d5d 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 bec2b603e..8dc223204 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/49] 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 e4b42029d..3f1eca547 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 19dacc3ae..bbab56bdc 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 94ab0127a..2a7b4a283 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 2dba84c2c..192eb47f6 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 75c0319bf..8338d4f41 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 e9e98c9e3..8049bf527 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 7271c0468..927a6aff5 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 d200adc59..fd3fefc0a 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 864f7f34d..a15b92193 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/49] 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 fd3fefc0a..08be05b01 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 7ba3ae18b..69cd86a68 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/49] 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 b03e5581c..14cb805a2 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 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 47/49] 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 55b5607a2..c1d14bb90 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 48/49] 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 fea874003..998a092c2 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 49/49] 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 c1d14bb90..55b5607a2 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; }