Added support for valueFormat directive

packages/mermaid/src/defaultConfig.ts

@@ -267,6 +267,7 @@ const config: RequiredDeep<MermaidConfig> = {
     borderWidth: 1,
     valueFontSize: 12,
     labelFontSize: 14,
+    valueFormat: ',',
   },
 };
 

packages/mermaid/src/diagrams/treemap/renderer.ts

@@ -47,7 +47,33 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
   configureSvgSize(svg, svgHeight, svgWidth, config.useMaxWidth);
 
   // Format for displaying values
-  const valueFormat = format(',');
+  let valueFormat;
+  try {
+    // Handle special format patterns
+    const formatStr = config.valueFormat || ',';
+
+    // Handle special cases that aren't directly supported by D3 format
+    if (formatStr === '$0,0') {
+      // Currency with thousands separator
+      valueFormat = (value: number) => '$' + format(',')(value);
+    } else if (formatStr.startsWith('$') && formatStr.includes(',')) {
+      // Other dollar formats with commas
+      const precision = formatStr.match(/\.\d+/);
+      const precisionStr = precision ? precision[0] : '';
+      valueFormat = (value: number) => '$' + format(',' + precisionStr)(value);
+    } else if (formatStr.startsWith('$')) {
+      // Simple dollar sign prefix
+      const restOfFormat = formatStr.substring(1);
+      valueFormat = (value: number) => '$' + format(restOfFormat || '')(value);
+    } else {
+      // Standard D3 format
+      valueFormat = format(formatStr);
+    }
+  } catch (error) {
+    console.error('Error creating format function:', error);
+    // Fallback to default format
+    valueFormat = format(',');
+  }
 
   // Create color scale
   const colorScale = scaleOrdinal<string>().range([

packages/mermaid/src/diagrams/treemap/styles.ts

@@ -1,53 +1,51 @@
 import type { DiagramStylesProvider } from '../../diagram-api/types.js';
 import { cleanAndMerge } from '../../utils.js';
-import type { PacketStyleOptions } from './types.js';
+import type { TreemapStyleOptions } from './types.js';
 
-const defaultPacketStyleOptions: PacketStyleOptions = {
-  byteFontSize: '10px',
-  startByteColor: 'black',
-  endByteColor: 'black',
+const defaultTreemapStyleOptions: TreemapStyleOptions = {
+  sectionStrokeColor: 'black',
+  sectionStrokeWidth: '1',
+  sectionFillColor: '#efefef',
+  leafStrokeColor: 'black',
+  leafStrokeWidth: '1',
+  leafFillColor: '#efefef',
   labelColor: 'black',
   labelFontSize: '12px',
+  valueFontSize: '10px',
+  valueColor: 'black',
   titleColor: 'black',
   titleFontSize: '14px',
-  blockStrokeColor: 'black',
-  blockStrokeWidth: '1',
-  blockFillColor: '#efefef',
 };
 
 export const getStyles: DiagramStylesProvider = ({
-  packet,
-}: { packet?: PacketStyleOptions } = {}) => {
-  const options = cleanAndMerge(defaultPacketStyleOptions, packet);
+  treemap,
+}: { treemap?: TreemapStyleOptions } = {}) => {
+  const options = cleanAndMerge(defaultTreemapStyleOptions, treemap);
 
   return `
-  .treemapNode {
-    // stroke: black;
-    // stroke-width: 1;
+  .treemapNode.section {
+    stroke: ${options.sectionStrokeColor};
+    stroke-width: ${options.sectionStrokeWidth};
+    fill: ${options.sectionFillColor};
   }
-	.packetByte {
-		font-size: ${options.byteFontSize};
-	}
-	.packetByte.start {
-		fill: ${options.startByteColor};
-	}
-	.packetByte.end {
-		fill: ${options.endByteColor};
-	}
-	.packetLabel {
-		fill: ${options.labelColor};
-		font-size: ${options.labelFontSize};
-	}
-	.packetTitle {
-		fill: ${options.titleColor};
-		font-size: ${options.titleFontSize};
-	}
-	.packetBlock {
-		stroke: ${options.blockStrokeColor};
-		stroke-width: ${options.blockStrokeWidth};
-		fill: ${options.blockFillColor};
-	}
-	`;
+  .treemapNode.leaf {
+    stroke: ${options.leafStrokeColor};
+    stroke-width: ${options.leafStrokeWidth};
+    fill: ${options.leafFillColor};
+  }
+  .treemapLabel {
+    fill: ${options.labelColor};
+    font-size: ${options.labelFontSize};
+  }
+  .treemapValue {
+    fill: ${options.valueColor};
+    font-size: ${options.valueFontSize};
+  }
+  .treemapTitle {
+    fill: ${options.titleColor};
+    font-size: ${options.titleFontSize};
+  }
+  `;
 };
 
 export default getStyles;

packages/mermaid/src/diagrams/treemap/types.ts

@@ -49,4 +49,5 @@ export interface TreemapDiagramConfig extends BaseDiagramConfig {
   borderWidth?: number;
   valueFontSize?: number;
   labelFontSize?: number;
+  valueFormat?: string;
 }

packages/mermaid/src/diagrams/treemap/utils.ts

@@ -6,7 +6,14 @@ import type { TreemapNode } from './types.js';
  * @returns A hierarchical tree structure
  */
 export function buildHierarchy(
-  items: { level: number; name: string; type: string; value?: number; classSelector?: string }[]
+  items: {
+    level: number;
+    name: string;
+    type: string;
+    value?: number;
+    classSelector?: string;
+    cssCompiledStyles?: string;
+  }[]
 ): TreemapNode[] {
   if (!items.length) {
     return [];
@@ -21,7 +28,9 @@ export function buildHierarchy(
       children: item.type === 'Leaf' ? undefined : [],
     };
     node.classSelector = item?.classSelector;
-    node.cssCompiledStyles = item?.cssCompiledStyles;
+    if (item?.cssCompiledStyles) {
+      node.cssCompiledStyles = [item.cssCompiledStyles];
+    }
 
     if (item.type === 'Leaf' && item.value !== undefined) {
       node.value = item.value;

packages/mermaid/src/docs/syntax/treemap.md

@@ -141,7 +141,20 @@ treemap
 
 ### Value Formatting
 
-Values in treemap diagrams can be formatted to display in different ways:
+Values in treemap diagrams can be formatted to display in different ways using the `valueFormat` configuration option. This option primarily uses [D3's format specifiers](https://github.com/d3/d3-format#locale_format) to control how numbers are displayed, with some additional special cases for common formats.
+
+Some common format patterns:
+- `,` - Thousands separator (default)
+- `$` - Add dollar sign
+- `.1f` - Show one decimal place
+- `.1%` - Show as percentage with one decimal place
+- `$0,0` - Dollar sign with thousands separator
+- `$.2f` - Dollar sign with 2 decimal places
+- `$,.2f` - Dollar sign with thousands separator and 2 decimal places
+
+The treemap diagram supports both standard D3 format specifiers and some common currency formats that combine the dollar sign with other formatting options.
+
+Example with currency formatting:
 
 ```mermaid-example
 %%{init: {'treemap': {'valueFormat': '$0,0'}}}%%
@@ -156,6 +169,18 @@ treemap
         "Events": 100000
 ```
 
+Example with percentage formatting:
+
+```mermaid-example
+%%{init: {'treemap': {'valueFormat': '.1%'}}}%%
+treemap
+"Market Share"
+    "Company A": 0.35
+    "Company B": 0.25
+    "Company C": 0.15
+    "Others": 0.25
+```
+
 ## Common Use Cases
 
 Treemap diagrams are commonly used for: