From 81542142f569c87efbb29abb96024c1dccfd5997 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 18 Jun 2023 01:32:45 +0300 Subject: [PATCH] Fix errors --- packages/mermaid/src/config.type.ts | 2 +- .../src/diagrams/sankey/sankeyRenderer.ts | 55 ++++++++----------- pnpm-lock.yaml | 4 ++ 3 files changed, 28 insertions(+), 33 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 3f3716928..f50a15d6b 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -412,7 +412,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { wrappingWidth?: number; } -export interface SankeyDiagramConfig extends BaseDiagramConfig {} +export type SankeyDiagramConfig = BaseDiagramConfig; export interface FontConfig { fontSize?: string | number; diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index 5d7fb2f64..8731dd5ce 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -9,10 +9,7 @@ import { // rgb as d3rgb, map as d3map, } from 'd3'; -import { - sankey as d3sankey, - sankeyLinkHorizontal -} from 'd3-sankey'; +import { sankey as d3sankey, sankeyLinkHorizontal } from 'd3-sankey'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import sankeyDB from './sankeyDB.js'; @@ -25,12 +22,12 @@ import sankeyDB from './sankeyDB.js'; * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram */ export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void { - // First of all parse sankey language // Everything that is parsed will be stored in diagObj.DB // That is why we need to clear DB first // - if (typeof (diagObj?.db?.clear) !== 'undefined') { // why do we need to check for undefined? typescript complains + if (diagObj?.db?.clear !== undefined) { + // why do we need to check for undefined? typescript complains diagObj?.db?.clear(); } // Launch parsing @@ -75,21 +72,17 @@ export const draw = function (text: string, id: string, _version: string, diagOb // { "source": "Bob", "target": "Carol", "value": 43 } // ] // }; - // - let graph = { - "nodes": [ - { "id": "Alice" }, - { "id": "Bob" }, - { "id": "Carol" } + // + const graph = { + nodes: [{ id: 'Alice' }, { id: 'Bob' }, { id: 'Carol' }], + links: [ + { source: 'Alice', target: 'Bob', value: 23 }, + { source: 'Bob', target: 'Carol', value: 43 }, ], - "links": [ - { "source": "Alice", "target": "Bob", "value": 23 }, - { "source": "Bob", "target": "Carol", "value": 43 } - ] }; // Construct and configure a Sankey generator - // That will be a functino that calculates nodes and links dimentions + // That will be a function that calculates nodes and links dimensions // const sankey = d3sankey() .nodeId((d) => d.id) // we use 'id' property to identify node @@ -102,10 +95,10 @@ export const draw = function (text: string, id: string, _version: string, diagOb // .nodePadding(10) // .extent([[1, 5], [width - 1, height - 5]]); // .nodeId(d => d['id']) - // + // // Compute the Sankey layout - // Namely calalculate nodes and links positions + // Namely calculate nodes and links positions // Our `graph` object will be mutated by this // sankey(graph); @@ -125,19 +118,19 @@ export const draw = function (text: string, id: string, _version: string, diagOb // // .attr("stroke-opacity", nodeStrokeOpacity) // // .attr("stroke-linejoin", nodeStrokeLinejoin) - var color = d3scaleOrdinal(d3schemeTableau10); + const color = d3scaleOrdinal(d3schemeTableau10); // Creates the rects that represent the nodes. - const rect = svg.append("g") - .attr("stroke", "#000") - .selectAll("rect") + const rect = svg + .append('g') + .attr('stroke', '#000') + .selectAll('rect') .data(graph.nodes) - .join("rect") - .attr("x", d => d.x0) - .attr("y", d => d.y0) - .attr("height", d => d.y1 - d.y0) - .attr("width", d => d.x1 - d.x0) - .attr("fill", d => color(d.node)); - + .join('rect') + .attr('x', (d) => d.x0) + .attr('y', (d) => d.y0) + .attr('height', (d) => d.y1 - d.y0) + .attr('width', (d) => d.x1 - d.x0) + .attr('fill', (d) => color(d.node)); // // add in the links // var link = svg.append("g") @@ -163,7 +156,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb // // .on("drag", dragmove)) // ; - // // add the rectangles for the nodes // node // .append("rect") @@ -175,7 +167,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb // .append("title") // .text(function (d) { return d.name + "\n" + "There is " + d.value + " stuff in this node"; }); - // // add in the title for the nodes // node // .append("text") diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index da40c7d36..f02a51f09 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15810,3 +15810,7 @@ packages: /zwitch@2.0.2: resolution: {integrity: sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==} dev: true + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false