From 38013de7114966e8b1a83396703ef8158bb34466 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 6 Jul 2023 01:06:01 +0100 Subject: [PATCH 1/5] fix(quadrant): make quadrant options optional Make the types of the options in QuadrantChartConfig in the MermaidConfig optional. All of these (except for the values in `BaseDiagramConfig`) will be automatically set to their default values, so they're optional from a user perspective. --- packages/mermaid/src/config.type.ts | 36 +++++++++---------- .../quadrant-chart/quadrantBuilder.ts | 5 +-- 2 files changed, 21 insertions(+), 20 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 138eee44f3..3b5826d1ae 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -229,24 +229,24 @@ export interface PieDiagramConfig extends BaseDiagramConfig { } export interface QuadrantChartConfig extends BaseDiagramConfig { - chartWidth: number; - chartHeight: number; - titleFontSize: number; - titlePadding: number; - quadrantPadding: number; - xAxisLabelPadding: number; - yAxisLabelPadding: number; - xAxisLabelFontSize: number; - yAxisLabelFontSize: number; - quadrantLabelFontSize: number; - quadrantTextTopPadding: number; - pointTextPadding: number; - pointLabelFontSize: number; - pointRadius: number; - xAxisPosition: 'top' | 'bottom'; - yAxisPosition: 'left' | 'right'; - quadrantInternalBorderStrokeWidth: number; - quadrantExternalBorderStrokeWidth: number; + chartWidth?: number; + chartHeight?: number; + titleFontSize?: number; + titlePadding?: number; + quadrantPadding?: number; + xAxisLabelPadding?: number; + yAxisLabelPadding?: number; + xAxisLabelFontSize?: number; + yAxisLabelFontSize?: number; + quadrantLabelFontSize?: number; + quadrantTextTopPadding?: number; + pointTextPadding?: number; + pointLabelFontSize?: number; + pointRadius?: number; + xAxisPosition?: 'top' | 'bottom'; + yAxisPosition?: 'left' | 'right'; + quadrantInternalBorderStrokeWidth?: number; + quadrantExternalBorderStrokeWidth?: number; } export interface ErDiagramConfig extends BaseDiagramConfig { diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts index 8168551ad4..9c11627620 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts @@ -1,7 +1,7 @@ // @ts-ignore: TODO Fix ts errors import { scaleLinear } from 'd3'; import { log } from '../../logger.js'; -import { QuadrantChartConfig } from '../../config.type.js'; +import type { BaseDiagramConfig, QuadrantChartConfig } from '../../config.type.js'; import defaultConfig from '../../defaultConfig.js'; import { getThemeVariables } from '../../themes/theme-default.js'; @@ -71,7 +71,8 @@ export interface quadrantBuilderData { points: QuadrantPointInputType[]; } -export interface QuadrantBuilderConfig extends QuadrantChartConfig { +export interface QuadrantBuilderConfig + extends Required> { showXAxis: boolean; showYAxis: boolean; showTitle: boolean; From 5885f5f82a738afd439dca2f8992de110dfe7698 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 6 Jul 2023 01:19:34 +0100 Subject: [PATCH 2/5] test: rename src/config.spec.js to config.spec.ts --- packages/mermaid/src/{config.spec.js => config.spec.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/mermaid/src/{config.spec.js => config.spec.ts} (100%) diff --git a/packages/mermaid/src/config.spec.js b/packages/mermaid/src/config.spec.ts similarity index 100% rename from packages/mermaid/src/config.spec.js rename to packages/mermaid/src/config.spec.ts From f731853e01339d9cc9e7e5582d70039293a0db7e Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 6 Jul 2023 01:20:24 +0100 Subject: [PATCH 3/5] style: fix lint issues in src/config.spec.ts It looks like our linter automatically converts `let` to `const` in TypeScript files, but not in JavaScript files. --- packages/mermaid/src/config.spec.ts | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts index 1f7fd976b3..c962445e66 100644 --- a/packages/mermaid/src/config.spec.ts +++ b/packages/mermaid/src/config.spec.ts @@ -6,16 +6,16 @@ describe('when working with site config', function () { configApi.setSiteConfig({}); }); it('should set site config and config properly', function () { - let config_0 = { foo: 'bar', bar: 0 }; + const config_0 = { foo: 'bar', bar: 0 }; configApi.setSiteConfig(config_0); - let config_1 = configApi.getSiteConfig(); - let config_2 = configApi.getConfig(); + const config_1 = configApi.getSiteConfig(); + const config_2 = configApi.getConfig(); expect(config_1.foo).toEqual(config_0.foo); expect(config_1.bar).toEqual(config_0.bar); expect(config_1).toEqual(config_2); }); it('should respect secure keys when applying directives', function () { - let config_0 = { + const config_0 = { foo: 'bar', bar: 'cant-be-changed', secure: [...configApi.defaultConfig.secure, 'bar'], @@ -27,30 +27,30 @@ describe('when working with site config', function () { expect(cfg.bar).toBe(config_0.bar); }); it('should set reset config properly', function () { - let config_0 = { foo: 'bar', bar: 0 }; + const config_0 = { foo: 'bar', bar: 0 }; configApi.setSiteConfig(config_0); - let config_1 = { foo: 'baf' }; + const config_1 = { foo: 'baf' }; configApi.setConfig(config_1); - let config_2 = configApi.getConfig(); + const config_2 = configApi.getConfig(); expect(config_2.foo).toEqual(config_1.foo); configApi.reset(); - let config_3 = configApi.getConfig(); + const config_3 = configApi.getConfig(); expect(config_3.foo).toEqual(config_0.foo); - let config_4 = configApi.getSiteConfig(); + const config_4 = configApi.getSiteConfig(); expect(config_4.foo).toEqual(config_0.foo); }); it('should set global reset config properly', function () { - let config_0 = { foo: 'bar', bar: 0 }; + const config_0 = { foo: 'bar', bar: 0 }; configApi.setSiteConfig(config_0); - let config_1 = configApi.getSiteConfig(); + const config_1 = configApi.getSiteConfig(); expect(config_1.foo).toEqual(config_0.foo); - let config_2 = configApi.getConfig(); + const config_2 = configApi.getConfig(); expect(config_2.foo).toEqual(config_0.foo); configApi.setConfig({ foobar: 'bar0' }); - let config_3 = configApi.getConfig(); + const config_3 = configApi.getConfig(); expect(config_3.foobar).toEqual('bar0'); configApi.reset(); - let config_4 = configApi.getConfig(); + const config_4 = configApi.getConfig(); expect(config_4.foobar).toBeUndefined(); }); }); From 6ceee7f253ddc20b76b63a7a1b90500f9db0bd11 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 6 Jul 2023 01:27:24 +0100 Subject: [PATCH 4/5] test: fix types in `config.spec.ts` The `foo`, `bar`, and `foobar` options don't exist in MermaidConfig. Instead, I've replaced them with: - `foo` -> `fontFamily` - `bar` -> `fontSize` - `foobar` -> `altfontFamily` --- packages/mermaid/src/config.spec.ts | 40 ++++++++++++++--------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts index c962445e66..7a35614a49 100644 --- a/packages/mermaid/src/config.spec.ts +++ b/packages/mermaid/src/config.spec.ts @@ -6,51 +6,51 @@ describe('when working with site config', function () { configApi.setSiteConfig({}); }); it('should set site config and config properly', function () { - const config_0 = { foo: 'bar', bar: 0 }; + const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; configApi.setSiteConfig(config_0); const config_1 = configApi.getSiteConfig(); const config_2 = configApi.getConfig(); - expect(config_1.foo).toEqual(config_0.foo); - expect(config_1.bar).toEqual(config_0.bar); + expect(config_1.fontFamily).toEqual(config_0.fontFamily); + expect(config_1.fontSize).toEqual(config_0.fontSize); expect(config_1).toEqual(config_2); }); it('should respect secure keys when applying directives', function () { const config_0 = { - foo: 'bar', - bar: 'cant-be-changed', - secure: [...configApi.defaultConfig.secure, 'bar'], + fontFamily: 'foo-font', + fontSize: 12345, // can't be changed + secure: [...configApi.defaultConfig.secure!, 'fontSize'], }; configApi.setSiteConfig(config_0); - const directive = { foo: 'baf', bar: 'should-not-be-allowed' }; + const directive = { fontFamily: 'baf', fontSize: 54321 /* fontSize shouldn't be changed */ }; const cfg = configApi.updateCurrentConfig(config_0, [directive]); - expect(cfg.foo).toEqual(directive.foo); - expect(cfg.bar).toBe(config_0.bar); + expect(cfg.fontFamily).toEqual(directive.fontFamily); + expect(cfg.fontSize).toBe(config_0.fontSize); }); it('should set reset config properly', function () { - const config_0 = { foo: 'bar', bar: 0 }; + const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; configApi.setSiteConfig(config_0); - const config_1 = { foo: 'baf' }; + const config_1 = { fontFamily: 'baf' }; configApi.setConfig(config_1); const config_2 = configApi.getConfig(); - expect(config_2.foo).toEqual(config_1.foo); + expect(config_2.fontFamily).toEqual(config_1.fontFamily); configApi.reset(); const config_3 = configApi.getConfig(); - expect(config_3.foo).toEqual(config_0.foo); + expect(config_3.fontFamily).toEqual(config_0.fontFamily); const config_4 = configApi.getSiteConfig(); - expect(config_4.foo).toEqual(config_0.foo); + expect(config_4.fontFamily).toEqual(config_0.fontFamily); }); it('should set global reset config properly', function () { - const config_0 = { foo: 'bar', bar: 0 }; + const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; configApi.setSiteConfig(config_0); const config_1 = configApi.getSiteConfig(); - expect(config_1.foo).toEqual(config_0.foo); + expect(config_1.fontFamily).toEqual(config_0.fontFamily); const config_2 = configApi.getConfig(); - expect(config_2.foo).toEqual(config_0.foo); - configApi.setConfig({ foobar: 'bar0' }); + expect(config_2.fontFamily).toEqual(config_0.fontFamily); + configApi.setConfig({ altFontFamily: 'bar-font' }); const config_3 = configApi.getConfig(); - expect(config_3.foobar).toEqual('bar0'); + expect(config_3.altFontFamily).toEqual('bar-font'); configApi.reset(); const config_4 = configApi.getConfig(); - expect(config_4.foobar).toBeUndefined(); + expect(config_4.altFontFamily).toBeUndefined(); }); }); From a862565a24a6ffd47a689906b4b101aa7bdb80b2 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 6 Jul 2023 01:35:11 +0100 Subject: [PATCH 5/5] test: test partial QuadrantChartConfig options --- packages/mermaid/src/config.spec.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts index 7a35614a49..457cb82443 100644 --- a/packages/mermaid/src/config.spec.ts +++ b/packages/mermaid/src/config.spec.ts @@ -26,6 +26,22 @@ describe('when working with site config', function () { expect(cfg.fontFamily).toEqual(directive.fontFamily); expect(cfg.fontSize).toBe(config_0.fontSize); }); + it('should allow setting partial options', function () { + const defaultConfig = configApi.getConfig(); + + configApi.setConfig({ + quadrantChart: { + chartHeight: 600, + }, + }); + + const updatedConfig = configApi.getConfig(); + + // deep options we didn't update should remain the same + expect(defaultConfig.quadrantChart!.chartWidth).toEqual( + updatedConfig.quadrantChart!.chartWidth + ); + }); it('should set reset config properly', function () { const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; configApi.setSiteConfig(config_0);