From 32b692b8b64d913e8fdd0aaba6fd58c864807cf0 Mon Sep 17 00:00:00 2001 From: Timur Olzhabayev Date: Thu, 22 Feb 2024 11:24:10 +0000 Subject: [PATCH 1/6] Making the whole shape background match indicator color instead of value node only --- src/visualizers/updateDiagramStyle.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/visualizers/updateDiagramStyle.ts b/src/visualizers/updateDiagramStyle.ts index 6ecfca5..a6ffd9e 100644 --- a/src/visualizers/updateDiagramStyle.ts +++ b/src/visualizers/updateDiagramStyle.ts @@ -55,6 +55,16 @@ const selectTextElementContainingAlias = (container: HTMLElement, alias: string) }); }; +const fetchParentsUntilShapeElementFound = (element: HTMLElement, selector: string): HTMLElement | null => { + if (element.matches(selector)) { + return element; + } + if (element.parentElement) { + return fetchParentsUntilShapeElementFound(element.parentElement, selector); + } + return null; +} + const resizeGrouping = (element: Selection | null | undefined, nodeSize: NodeSizeOptions) => { if (!element) { return; @@ -114,6 +124,7 @@ const styleFlowChartEdgeLabel = ( useBackground: boolean, nodeSize: NodeSizeOptions ) => { + const parentShapeElement = fetchParentsUntilShapeElementFound(targetElement.node(), '.node.flowchart-label'); const edgeParent = select(targetElement.node().parentNode); edgeParent.append('br'); const v = edgeParent.append('span'); @@ -123,6 +134,7 @@ const styleFlowChartEdgeLabel = ( if (indicator.color) { if (useBackground) { v.style('background-color', indicator.color); + parentShapeElement?.firstElementChild?.setAttribute('style', `fill: ${indicator.color}`); } else { v.style('color', indicator.color); } From ca2441b9bfb156538aa1af4c5a834f6ab727db06 Mon Sep 17 00:00:00 2001 From: Timur Olzhabayev Date: Thu, 22 Feb 2024 18:12:56 +0000 Subject: [PATCH 2/6] improving styling of flowchart nodes --- src/config/diagramDefaults.ts | 1 + src/diagramStyleFormatter.ts | 2 ++ 2 files changed, 3 insertions(+) diff --git a/src/config/diagramDefaults.ts b/src/config/diagramDefaults.ts index d3b4e17..ec11e45 100644 --- a/src/config/diagramDefaults.ts +++ b/src/config/diagramDefaults.ts @@ -7,6 +7,7 @@ export const defaultFlowChartConfig: FlowchartDiagramConfig & { useMaxWidth: boo curve: 'linear', htmlLabels: true, useMaxWidth: true, + padding: 40 }; export const defaultMermaidOptions: MermaidConfig = { diff --git a/src/diagramStyleFormatter.ts b/src/diagramStyleFormatter.ts index a5f89f5..ed25791 100644 --- a/src/diagramStyleFormatter.ts +++ b/src/diagramStyleFormatter.ts @@ -2,6 +2,8 @@ function diagramStyleFormatter(customStyle: string, diagramId: string) { return ` #${diagramId} .badge, #${diagramId} .label { text-shadow: none; + line-height: unset; + font-size: 0.75rem; } #${diagramId} foreignObject { From ed40d96da5d092d83c2e826ab5b222faa108d495 Mon Sep 17 00:00:00 2001 From: Timur Olzhabayev Date: Fri, 23 Feb 2024 14:55:45 +0000 Subject: [PATCH 3/6] Adding vertical scroll to diagrams that are not auto-scaling so that when they overfow they can still be used --- src/visualizers/updateDiagramStyle.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/visualizers/updateDiagramStyle.ts b/src/visualizers/updateDiagramStyle.ts index a6ffd9e..8ede177 100644 --- a/src/visualizers/updateDiagramStyle.ts +++ b/src/visualizers/updateDiagramStyle.ts @@ -304,6 +304,10 @@ export const updateDiagramStyle = ( select(svg).style('max-width', '100%').style('max-height', '100%'); } + if (svg.parentElement && !options.maxWidth) { + svg.parentElement.setAttribute('style', 'overflow-y: scroll'); + } + indicators.forEach((indicator) => { processDiagramSeriesModel(svg, indicator, options); }); From 3d3f4e753da9414edfcd9cdb8193a39a79fb2a58 Mon Sep 17 00:00:00 2001 From: Timur Olzhabayev Date: Fri, 23 Feb 2024 15:03:36 +0000 Subject: [PATCH 4/6] moving parent element fetching to only fetch it when necessary --- src/visualizers/updateDiagramStyle.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/visualizers/updateDiagramStyle.ts b/src/visualizers/updateDiagramStyle.ts index 8ede177..5805205 100644 --- a/src/visualizers/updateDiagramStyle.ts +++ b/src/visualizers/updateDiagramStyle.ts @@ -123,8 +123,7 @@ const styleFlowChartEdgeLabel = ( indicator: MetricIndicator, useBackground: boolean, nodeSize: NodeSizeOptions -) => { - const parentShapeElement = fetchParentsUntilShapeElementFound(targetElement.node(), '.node.flowchart-label'); +) => { const edgeParent = select(targetElement.node().parentNode); edgeParent.append('br'); const v = edgeParent.append('span'); @@ -134,6 +133,7 @@ const styleFlowChartEdgeLabel = ( if (indicator.color) { if (useBackground) { v.style('background-color', indicator.color); + const parentShapeElement = fetchParentsUntilShapeElementFound(targetElement.node(), '.node.flowchart-label'); parentShapeElement?.firstElementChild?.setAttribute('style', `fill: ${indicator.color}`); } else { v.style('color', indicator.color); @@ -307,7 +307,7 @@ export const updateDiagramStyle = ( if (svg.parentElement && !options.maxWidth) { svg.parentElement.setAttribute('style', 'overflow-y: scroll'); } - + indicators.forEach((indicator) => { processDiagramSeriesModel(svg, indicator, options); }); From 172c81be85e9c2da26a225ebaa8e9f409aad4f0c Mon Sep 17 00:00:00 2001 From: Timur Olzhabayev Date: Fri, 23 Feb 2024 21:50:50 +0000 Subject: [PATCH 5/6] fixing element searching by id --- src/visualizers/updateDiagramStyle.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/visualizers/updateDiagramStyle.ts b/src/visualizers/updateDiagramStyle.ts index 5805205..6105b8c 100644 --- a/src/visualizers/updateDiagramStyle.ts +++ b/src/visualizers/updateDiagramStyle.ts @@ -12,7 +12,7 @@ type MetricIndicator = DisplayValue & { }; const selectElementById = (container: HTMLElement, id: string): Selection => { - return select(container.querySelector('#' + id)); + return select(document.getElementById('#' + id)); }; const selectElementByEdgeLabel = (container: HTMLElement, id: string): Selection => { From 31aa289722973029b47c04932b9144e8d4d7d7a6 Mon Sep 17 00:00:00 2001 From: Timur Olzhabayev Date: Mon, 26 Feb 2024 11:44:08 +0000 Subject: [PATCH 6/6] switching to data-id instead of id --- src/visualizers/updateDiagramStyle.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/visualizers/updateDiagramStyle.ts b/src/visualizers/updateDiagramStyle.ts index 6105b8c..a931d80 100644 --- a/src/visualizers/updateDiagramStyle.ts +++ b/src/visualizers/updateDiagramStyle.ts @@ -12,7 +12,7 @@ type MetricIndicator = DisplayValue & { }; const selectElementById = (container: HTMLElement, id: string): Selection => { - return select(document.getElementById('#' + id)); + return select(container.querySelector(`[data-id="${id}"]`)); }; const selectElementByEdgeLabel = (container: HTMLElement, id: string): Selection => {