matterviz 0.4.0 → 0.4.2

package/dist/composition/FormulaFilter.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Icon from '../Icon.svelte'
   import { get_alphabetical_formula } from './format'
-  import { ELEM_SYMBOLS } from '../labels'
+  import { is_elem_symbol, type ElementSymbol } from '../element'
   import { tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
   import type { FormulaSearchMode } from './index'
@@ -46,20 +46,17 @@
   const DEFAULT_SEARCH_EXAMPLES: SearchExampleCategory[] = [
     {
       label: `Has elements`,
-      description:
-        `Materials containing these elements. Operators/ranges: +Li,-O,Fe:1-2. Use * for any element.`,
+      description: `Materials containing these elements. Operators/ranges: +Li,-O,Fe:1-2. Use * for any element.`,
       examples: [`Li,Fe`, `+Li,-O`, `Li,*,*`],
     },
     {
       label: `Chemical system`,
-      description:
-        `Materials with only these elements (no others). Wildcards/ranges supported.`,
+      description: `Materials with only these elements (no others). Wildcards/ranges supported.`,
       examples: [`Li-Fe-O`, `Li-Fe-*-*`, `*-*-O`],
     },
     {
       label: `Exact formula`,
-      description:
-        `Materials with this exact stoichiometry. Unicode paste, wildcards, and canonicalization supported.`,
+      description: `Materials with this exact stoichiometry. Unicode paste, wildcards, and canonicalization supported.`,
       examples: [`LiFePO4`, `LiFe*2*`, `*2O3`],
     },
   ]
@@ -162,10 +159,9 @@
       if (!raw) return []
       const parsed: unknown = JSON.parse(raw)
       if (!Array.isArray(parsed)) return []
-      return parsed.filter((item): item is string => typeof item === `string`).slice(
-        0,
-        max_history,
-      )
+      return parsed
+        .filter((item): item is string => typeof item === `string`)
+        .slice(0, max_history)
     } catch {
       return []
     }
@@ -249,9 +245,7 @@
   let visible_history = $derived.by(() => {
     const filtered = history
       .filter((item) => item !== value)
-      .filter((item) =>
-        item.toLowerCase().includes(history_query.toLowerCase().trim())
-      )
+      .filter((item) => item.toLowerCase().includes(history_query.toLowerCase().trim()))
     const pinned = filtered.filter((item) => pinned_history.includes(item))
     const unpinned = filtered.filter((item) => !pinned_history.includes(item))
     return [...pinned, ...unpinned]
@@ -305,9 +299,9 @@
   $effect(() => {
     if (!examples_open || !examples_wrapper) return
     requestAnimationFrame(() => {
-      const dropdown = examples_wrapper?.querySelector(`.examples-dropdown`) as
-        | HTMLElement
-        | null
+      const dropdown = examples_wrapper?.querySelector(
+        `.examples-dropdown`,
+      ) as HTMLElement | null
       if (!dropdown) return
       const rect = dropdown.getBoundingClientRect()
       if (rect.right > window.innerWidth && !anchor_left) anchor_left = true
@@ -337,11 +331,13 @@
     for (const [superscript, ascii] of Object.entries(SUPERSCRIPT_TO_ASCII)) {
       normalized = normalized.replaceAll(superscript, ascii)
     }
-    return normalized
-      // keep hydrate dots (deleting would glue digits: CuSO4·5H2O -> CuSO45H2O)
-      .replaceAll(`⋅`, `·`)
-      .replaceAll(`−`, `-`)
-      .replaceAll(/\s+/g, ``)
+    return (
+      normalized
+        // keep hydrate dots (deleting would glue digits: CuSO4·5H2O -> CuSO45H2O)
+        .replaceAll(`⋅`, `·`)
+        .replaceAll(`−`, `-`)
+        .replaceAll(/\s+/g, ``)
+    )
   }
 
   function normalize_exact_formula(input: string): string {
@@ -356,28 +352,29 @@
     try {
       const tokens = parse_formula_with_wildcards(sanitized_input)
       const explicit = tokens
-        .filter((token) => token.element !== null)
-        .map((token) => ({ element: token.element as string, count: token.count }))
+        .filter(
+          (token): token is { element: ElementSymbol; count: number } =>
+            token.element !== null,
+        )
+        .map((token) => ({ element: token.element, count: token.count }))
       const wildcard_tokens = tokens.filter((token) => token.element === null)
 
       // Merge explicit element counts before sorting.
       const merged_explicit: { element: string; count: number }[] = []
       for (const token of explicit) {
-        const existing = merged_explicit.find((item) =>
-          item.element === token.element
-        )
+        const existing = merged_explicit.find((item) => item.element === token.element)
         if (existing) existing.count += token.count
         else merged_explicit.push(token)
       }
       const sorted_explicit = merged_explicit.sort((elem_a, elem_b) =>
-        elem_a.element.localeCompare(elem_b.element)
+        elem_a.element.localeCompare(elem_b.element),
       )
-      const wildcard_str = wildcard_tokens.map((token) =>
-        token.count > 1 ? `*${token.count}` : `*`
-      ).join(``)
-      const explicit_str = sorted_explicit.map((token) =>
-        token.count > 1 ? `${token.element}${token.count}` : token.element
-      ).join(``)
+      const wildcard_str = wildcard_tokens
+        .map((token) => (token.count > 1 ? `*${token.count}` : `*`))
+        .join(``)
+      const explicit_str = sorted_explicit
+        .map((token) => (token.count > 1 ? `${token.element}${token.count}` : token.element))
+        .join(``)
       return `${explicit_str}${wildcard_str}`
     } catch {
       return sanitized_input
@@ -386,16 +383,18 @@
 
   function is_valid_constraint(constraint: string): boolean {
     if (!constraint) return true
-    return /^\d+$/.test(constraint) || /^\d+-\d+$/.test(constraint) ||
-      /^(>=|<=|>|<)\d+$/.test(constraint)
+    return (
+      /^\d+$/.test(constraint) ||
+      /^\d+-\d+$/.test(constraint) ||
+      /^(?:>=|<=|>|<)\d+$/.test(constraint)
+    )
   }
 
-  function strip_operator_prefix(
-    token: string,
-  ): { operator: FormulaFilterToken[`operator`]; value: string } {
-    const operator = token.startsWith(`-`) || token.startsWith(`!`)
-      ? `exclude`
-      : `include`
+  function strip_operator_prefix(token: string): {
+    operator: FormulaFilterToken[`operator`]
+    value: string
+  } {
+    const operator = token.startsWith(`-`) || token.startsWith(`!`) ? `exclude` : `include`
     const stripped_value =
       token.startsWith(`+`) || token.startsWith(`-`) || token.startsWith(`!`)
         ? token.slice(1)
@@ -425,11 +424,11 @@
     const [element_part, constraint] = without_operator.split(`:`)
     const element = element_part.trim()
     const is_wildcard = element === `*`
-    const is_valid_element = is_wildcard ||
-      ELEM_SYMBOLS.includes(element as (typeof ELEM_SYMBOLS)[number])
+    const is_valid_element = is_wildcard || is_elem_symbol(element)
     const normalized_constraint = constraint?.trim() || null
-    const is_valid = is_valid_element && (normalized_constraint === null ||
-      is_valid_constraint(normalized_constraint))
+    const is_valid =
+      is_valid_element &&
+      (normalized_constraint === null || is_valid_constraint(normalized_constraint))
 
     return {
       raw: raw_token,
@@ -441,36 +440,37 @@
     }
   }
 
-  function tokenize_query(
-    input: string,
-    mode: FormulaSearchMode,
-  ): FormulaFilterToken[] {
+  function tokenize_query(input: string, mode: FormulaSearchMode): FormulaFilterToken[] {
     const trimmed = input.trim()
     if (!trimmed) return []
     if (mode === `exact`) {
-      return [{
-        raw: trimmed,
-        element: trimmed,
-        operator: `include`,
-        constraint: null,
-        is_wildcard: has_wildcards(trimmed),
-        is_valid: sanitize_exact_formula(trimmed).is_valid,
-      }]
+      return [
+        {
+          raw: trimmed,
+          element: trimmed,
+          operator: `include`,
+          constraint: null,
+          is_wildcard: has_wildcards(trimmed),
+          is_valid: sanitize_exact_formula(trimmed).is_valid,
+        },
+      ]
     }
     const normalized = mode === `chemsys` ? trimmed.replaceAll(`,`, `-`) : trimmed
-    const tokens = mode === `chemsys`
-      // Keep range constraints like Fe:1-2 intact while splitting token separators.
-      ? normalized.split(/-(?!\d)/)
-      : normalized.split(`,`)
+    const tokens =
+      mode === `chemsys`
+        ? // Keep range constraints like Fe:1-2 intact while splitting token separators.
+          normalized.split(/-(?!\d)/)
+        : normalized.split(`,`)
     return tokens
       .map((token) => token.trim())
       .filter(Boolean)
       .map(parse_token)
   }
 
-  function sanitize_exact_formula(
-    input: string,
-  ): { is_valid: boolean; error_message: string | null } {
+  function sanitize_exact_formula(input: string): {
+    is_valid: boolean
+    error_message: string | null
+  } {
     const trimmed = input.trim()
     if (!trimmed) return { is_valid: true, error_message: null }
     try {
@@ -509,9 +509,7 @@
         return token_a.element.localeCompare(token_b.element)
       })
 
-    return normalized_tokens
-      .map(serialize_token)
-      .join(separator)
+    return normalized_tokens.map(serialize_token).join(separator)
   }
 
   function parse_query(
@@ -520,14 +518,15 @@
   ): FormulaFilterParseResult {
     const tokens = tokenize_query(normalized_value, mode)
     const first_invalid_token = tokens.find((token) => !token.is_valid)
-    const exact_validation = mode === `exact`
-      ? sanitize_exact_formula(normalized_value)
-      : {
-        is_valid: !first_invalid_token,
-        error_message: first_invalid_token
-          ? `Invalid token: ${first_invalid_token.raw}`
-          : null,
-      }
+    const exact_validation =
+      mode === `exact`
+        ? sanitize_exact_formula(normalized_value)
+        : {
+            is_valid: !first_invalid_token,
+            error_message: first_invalid_token
+              ? `Invalid token: ${first_invalid_token.raw}`
+              : null,
+          }
     return {
       value: normalized_value,
       normalized_value,
@@ -558,7 +557,10 @@
     if (!trimmed) return []
     // If contains commas or dashes, split by those and sort alphabetically
     if (trimmed.includes(`,`) || trimmed.includes(`-`)) {
-      const parts = trimmed.split(/[-,]/).map((str) => str.trim()).filter(Boolean)
+      const parts = trimmed
+        .split(/[-,]/)
+        .map((str) => str.trim())
+        .filter(Boolean)
       // Separate wildcards from regular elements
       const wildcards = parts.filter((part) => part === `*`)
       const regular_parts = parts.filter((part) => part !== `*`)
@@ -568,7 +570,8 @@
     }
     // Otherwise parse as formula (already returns sorted by default)
     // For formulas with wildcards, we can't parse them normally
-    if (has_wildcards(trimmed)) { // Use shared utility and extract unique elements
+    if (has_wildcards(trimmed)) {
+      // Use shared utility and extract unique elements
       const tokens = parse_formula_with_wildcards(trimmed)
       const unique_elements: string[] = []
       for (const token of tokens) {
@@ -577,9 +580,7 @@
         }
       }
       const elements = unique_elements.sort()
-      const wildcards = tokens.filter((token) => token.element === null).map(() =>
-        `*`
-      )
+      const wildcards = tokens.filter((token) => token.element === null).map(() => `*`)
       return [...elements, ...wildcards]
     }
     try {
@@ -671,9 +672,7 @@
         focused_history_idx = (focused_history_idx + 1) % len
       } else if (event.key === `ArrowUp`) {
         event.preventDefault()
-        focused_history_idx = focused_history_idx <= 0
-          ? len - 1
-          : focused_history_idx - 1
+        focused_history_idx = focused_history_idx <= 0 ? len - 1 : focused_history_idx - 1
       }
     }
   }
@@ -708,8 +707,8 @@
   function handle_menu_keydown(event: KeyboardEvent): void {
     const len = all_examples.length
     if (!len) return
-    const is_button_activation = (event.key === `Enter` || event.key === ` `) &&
-      event.target instanceof HTMLButtonElement
+    const is_button_activation =
+      (event.key === `Enter` || event.key === ` `) && event.target instanceof HTMLButtonElement
     if (is_button_activation) return
 
     const key_actions: Record<string, () => void> = {
@@ -733,8 +732,9 @@
   function remove_token(token_idx: number): void {
     if (search_mode === `exact`) return
     const separator = search_mode === `chemsys` ? `-` : `,`
-    const tokens = tokenize_query(input_value, search_mode)
-      .filter((_, idx) => idx !== token_idx)
+    const tokens = tokenize_query(input_value, search_mode).filter(
+      (_, idx) => idx !== token_idx,
+    )
     const next_value = tokens.map(serialize_token).join(separator)
     input_value = next_value
     set_value(next_value, search_mode)
@@ -751,8 +751,8 @@
     search_mode === `chemsys`
       ? `Li-Fe-O or Li-*-*`
       : search_mode === `exact`
-      ? `LiFePO4 or LiFe*2*`
-      : `Li,Fe,O or Li,*,*`,
+        ? `LiFePO4 or LiFe*2*`
+        : `Li,Fe,O or Li,*,*`,
   )
 
   const MODE_LABELS: Record<FormulaSearchMode, string> = {
@@ -876,8 +876,8 @@
       class:locked={mode_locked}
       onclick={cycle_mode}
       title={mode_locked
-      ? `Mode is locked`
-      : `Click to switch to '${next_mode.mode}' → ${next_mode.value}`}
+        ? `Mode is locked`
+        : `Click to switch to '${next_mode.mode}' → ${next_mode.value}`}
       {@attach tooltip()}
       aria-label="Change search mode"
     >
@@ -958,11 +958,7 @@
 </div>
 {#if show_chip_row}
   <div class="token-chip-row">
-    {#each parsed_tokens as
-      token,
-      idx
-      (`${token.operator}:${token.element}:${token.constraint ?? ``}:${idx}`)
-    }
+    {#each parsed_tokens as token, idx (`${token.operator}:${token.element}:${token.constraint ?? ``}:${idx}`)}
       <button
         type="button"
         class="token-chip"
@@ -1036,7 +1032,9 @@
       cursor: pointer;
       color: var(--highlight, #4db6ff);
       opacity: 0.8;
-      transition: opacity 0.15s, background 0.15s;
+      transition:
+        opacity 0.15s,
+        background 0.15s;
       &:hover {
         opacity: 1;
         background: rgba(77, 182, 255, 0.2);

package/dist/composition/PieChart.svelte

@@ -6,7 +6,12 @@
   import { format_num } from '../labels'
   import type { Snippet } from 'svelte'
   import type { SVGAttributes } from 'svelte/elements'
-  import { type ChartSegmentData, get_chart_font_scale } from './index'
+  import {
+    chart_segment_label,
+    chart_segment_suffix,
+    type ChartSegmentData,
+    get_chart_font_scale,
+  } from './index'
   import { count_atoms_in_composition, fractional_composition } from './parse'
 
   // Constants for pie chart calculations
@@ -75,21 +80,25 @@
 
         // Single element: full circle with no radial stroke line, label at center
         if (fraction === 1) {
-          const r = outer_radius
+          const radius = outer_radius
           const ir = inner_radius_adjusted
           // Two semicircular arcs to form a full circle (avoids SVG 360° arc bug)
-          const outer_arc = `M ${center} ${center - r} A ${r} ${r} 0 1 1 ${center} ${
-            center + r
-          } A ${r} ${r} 0 1 1 ${center} ${center - r} Z`
-          const path = ir > 0
-            ? `${outer_arc} M ${center} ${
-              center - ir
-            } A ${ir} ${ir} 0 1 0 ${center} ${
-              center + ir
-            } A ${ir} ${ir} 0 1 0 ${center} ${center - ir} Z`
-            : outer_arc
-          const label_text = element + (show_amounts ? String(amount) : ``) +
-            (show_percentages ? `${format_num(fraction, `.1~%`)}` : ``)
+          const outer_arc = `M ${center} ${center - radius} A ${radius} ${radius} 0 1 1 ${center} ${
+            center + radius
+          } A ${radius} ${radius} 0 1 1 ${center} ${center - radius} Z`
+          const path =
+            ir > 0
+              ? `${outer_arc} M ${center} ${center - ir} A ${ir} ${ir} 0 1 0 ${center} ${
+                  center + ir
+                } A ${ir} ${ir} 0 1 0 ${center} ${center - ir} Z`
+              : outer_arc
+          const label_text = chart_segment_label(
+            element,
+            amount,
+            fraction,
+            show_amounts,
+            show_percentages,
+          )
           return {
             element,
             amount,
@@ -101,7 +110,7 @@
             label_x: center,
             label_y: center,
             is_outside_slice: false,
-            font_scale: get_chart_font_scale(2.6, label_text, r * 2),
+            font_scale: get_chart_font_scale(2.6, label_text, radius * 2),
             text_color: pick_contrast_color({ bg_color: color }),
           }
         }
@@ -132,14 +141,15 @@
         const large_arc = angle_span > 180 ? 1 : 0
 
         // Create donut path if inner radius > 0, otherwise regular pie slice
-        const path = inner_radius_adjusted > 0
-          ? `M ${x1_outer} ${y1_outer} A ${outer_radius} ${outer_radius} 0 ${large_arc} 1 ${x2_outer} ${y2_outer} L ${x2_inner} ${y2_inner} A ${inner_radius_adjusted} ${inner_radius_adjusted} 0 ${large_arc} 0 ${x1_inner} ${y1_inner} Z`
-          : `M ${center} ${center} L ${x1_outer} ${y1_outer} A ${outer_radius} ${outer_radius} 0 ${large_arc} 1 ${x2_outer} ${y2_outer} Z`
+        const path =
+          inner_radius_adjusted > 0
+            ? `M ${x1_outer} ${y1_outer} A ${outer_radius} ${outer_radius} 0 ${large_arc} 1 ${x2_outer} ${y2_outer} L ${x2_inner} ${y2_inner} A ${inner_radius_adjusted} ${inner_radius_adjusted} 0 ${large_arc} 0 ${x1_inner} ${y1_inner} Z`
+            : `M ${center} ${center} L ${x1_outer} ${y1_outer} A ${outer_radius} ${outer_radius} 0 ${large_arc} 1 ${x2_outer} ${y2_outer} Z`
 
         // Position labels with three-tier strategy
         const is_very_thin_slice = angle_span < VERY_THIN_SLICE_THRESHOLD // Place outside
-        const is_medium_slice = angle_span >= VERY_THIN_SLICE_THRESHOLD &&
-          angle_span < MEDIUM_SLICE_THRESHOLD // Near outer edge
+        const is_medium_slice =
+          angle_span >= VERY_THIN_SLICE_THRESHOLD && angle_span < MEDIUM_SLICE_THRESHOLD // Near outer edge
 
         let label_radius: number
         let is_outside_slice = false
@@ -159,22 +169,22 @@
         // Calculate font scale based on slice size and smart text fitting
         const [min_font_scale, max_font_scale] = [1.4, 2] as const
         const scale_factor = angle_span / MAX_ANGLE_FOR_FULL_SCALE
-        const base_scale = min_font_scale +
-          scale_factor * (max_font_scale - min_font_scale)
-        const label_text = element + (show_amounts ? amount?.toString() ?? `` : ``) +
-          (show_percentages ? `${format_num(fraction, `.1~%`)}` : ``)
+        const base_scale = min_font_scale + scale_factor * (max_font_scale - min_font_scale)
+        const label_text = chart_segment_label(
+          element,
+          amount,
+          fraction,
+          show_amounts,
+          show_percentages,
+        )
         const available_space = is_very_thin_slice
           ? outer_radius * 0.8 // More space outside the slice
           : Math.min(
-            outer_radius - inner_radius_adjusted, // Radial space
-            (angle_span * Math.PI / 180) * label_radius * 0.8, // Arc space at label radius
-          )
+              outer_radius - inner_radius_adjusted, // Radial space
+              ((angle_span * Math.PI) / 180) * label_radius * 0.8, // Arc space at label radius
+            )
 
-        const font_scale = get_chart_font_scale(
-          base_scale,
-          label_text,
-          available_space,
-        )
+        const font_scale = get_chart_font_scale(base_scale, label_text, available_space)
 
         return {
           element,
@@ -202,7 +212,7 @@
   viewBox="0 0 {size} {size}"
   style:max-width="{size}px"
   {...rest}
-  class="pie-chart {rest.class ?? ``}"
+  class={[`pie-chart`, rest.class]}
   bind:this={svg_node}
 >
   {#each segments as segment (segment.element)}
@@ -211,10 +221,10 @@
       fill={segment.color}
       stroke="white"
       stroke-width={segments.length === 1
-      ? 0
-      : hovered_element === segment.element
-      ? stroke_width + 1
-      : stroke_width}
+        ? 0
+        : hovered_element === segment.element
+          ? stroke_width + 1
+          : stroke_width}
       class="pie-segment"
       class:interactive
       class:hovered={hovered_element === segment.element}
@@ -254,15 +264,18 @@
           class:outside-slice={segment.is_outside_slice}
           style:color={segment.text_color}
         >
-          <span class="element-symbol" style:font-size="{14 * segment.font_scale}px">{
-            segment.element
-          }</span>
+          <span class="element-symbol" style:font-size="{14 * segment.font_scale}px"
+            >{segment.element}</span
+          >
           {#if show_amounts || show_percentages}
-            <sub class="amount" style:font-size="{8 * segment.font_scale}px">{
-              show_amounts ? segment.amount : ``
-            }{show_amounts && show_percentages ? `=` : ``}{
-              show_percentages ? format_num(segment.fraction, `.1~%`) : ``
-            }</sub>
+            <sub class="amount" style:font-size="{8 * segment.font_scale}px"
+              >{chart_segment_suffix(
+                segment.amount,
+                segment.fraction,
+                show_amounts,
+                show_percentages,
+              )}</sub
+            >
           {/if}
         </div>
       </foreignObject>
@@ -285,7 +298,8 @@
   .pie-segment.interactive {
     cursor: pointer;
   }
-  .pie-segment.interactive:hover, .pie-segment.hovered {
+  .pie-segment.interactive:hover,
+  .pie-segment.hovered {
     filter: brightness(1.1);
   }
   .pie-segment.interactive:focus {

package/dist/composition/chem-sys.js

@@ -1,6 +1,7 @@
 // Build arity -> chemical-system hierarchy data for the Sunburst component
 // (counterpart to pymatviz's chem_sys_sunburst).
-import { is_valid_element, parse_formula } from './parse';
+import { is_elem_symbol } from '../element';
+import { parse_formula } from './parse';
 const ARITY_NAMES = [
     ``,
     `unary`,
@@ -29,7 +30,7 @@ export function chem_sys_sunburst_data(entries) {
         let elements;
         if (entry.includes(`-`)) {
             elements = entry.split(`-`).map((el) => el.trim());
-            if (!elements.every(is_valid_element))
+            if (!elements.every(is_elem_symbol))
                 return null;
         }
         else {

package/dist/composition/format.js

@@ -1,5 +1,6 @@
 import { format_num } from '../labels';
-import { ELEMENT_ELECTRONEGATIVITY_MAP, is_valid_element, parse_composition } from './parse';
+import { is_elem_symbol } from '../element';
+import { ELEMENT_ELECTRONEGATIVITY_MAP, parse_composition } from './parse';
 // Extract composition from structure object
 const structure_to_composition = (structure) => {
     if (!structure.sites || !Array.isArray(structure.sites)) {
@@ -20,7 +21,7 @@ const structure_to_composition = (structure) => {
 const is_structure_like = (input) => `sites` in input || `lattice` in input;
 // Format composition into chemical formula string
 export const format_composition_formula = (composition, sort_fn, plain_text = false, delim = ` `, amount_format = `.3~s`) => {
-    const symbols = Object.keys(composition).filter(is_valid_element);
+    const symbols = Object.keys(composition).filter(is_elem_symbol);
     return sort_fn(symbols)
         .filter((el) => composition[el] && composition[el] > 0)
         .map((el) => {
@@ -85,7 +86,7 @@ export const get_electro_neg_formula = (input, plain_text = false, delim = ` `,
 export function get_formula_label_segments(formula) {
     const segments = [];
     let cursor = 0;
-    for (const match of formula.matchAll(/([A-Za-z])(\d+(?:\.\d+)?)/g)) {
+    for (const match of formula.matchAll(/(?<letter>[A-Za-z])(?<amount>\d+(?:\.\d+)?)/g)) {
         const match_idx = match.index ?? 0;
         const prefix = match[1];
         const amount = match[2];

package/dist/composition/index.d.ts

@@ -18,4 +18,6 @@ export type ChartSegmentData = {
     font_scale: number;
     text_color: string;
 };
+export declare const chart_segment_suffix: (amount: number | undefined, fraction: number, show_amounts: boolean, show_percentages: boolean) => string;
+export declare const chart_segment_label: (element: string, amount: number | undefined, fraction: number, show_amounts: boolean, show_percentages: boolean) => string;
 export declare function get_chart_font_scale(base_scale: number, label_text: string, available_space: number, min_scale_factor?: number, base_font_size?: number): number;

package/dist/composition/index.js

@@ -1,3 +1,4 @@
+import { format_num } from '../labels';
 export { default as BarChart } from './BarChart.svelte';
 export { default as BubbleChart } from './BubbleChart.svelte';
 export * from './chem-sys';
@@ -7,6 +8,19 @@ export { default as Formula } from './Formula.svelte';
 export { default as FormulaFilter } from './FormulaFilter.svelte';
 export * from './parse';
 export { default as PieChart } from './PieChart.svelte';
+// Amount/percentage suffix rendered after the element symbol in bar/pie chart
+// segments; `=` separates amount from percentage when both are shown (Fe2=20%).
+// format_num (not toString) so float noise like 0.30000000000000004 can't leak
+// into labels; same format convention as format_composition_formula subscripts
+// (`.3~s`, avoiding SI prefixes for sub-1 amounts where `s` renders 0.5 as 500m)
+export const chart_segment_suffix = (amount, fraction, show_amounts, show_percentages) => (show_amounts && amount !== undefined
+    ? format_num(amount, Math.abs(amount) < 1 ? `.3~g` : `.3~s`)
+    : ``) +
+    (show_amounts && show_percentages ? `=` : ``) +
+    (show_percentages ? format_num(fraction, `.1~%`) : ``);
+// Full segment label used to estimate label width for font scaling; must match
+// the text the charts actually render (element symbol + chart_segment_suffix)
+export const chart_segment_label = (element, amount, fraction, show_amounts, show_percentages) => element + chart_segment_suffix(amount, fraction, show_amounts, show_percentages);
 export function get_chart_font_scale(base_scale, label_text, available_space, min_scale_factor = 0.7, base_font_size = 16) {
     const text_width = label_text.length * 0.6 * base_font_size * base_scale;
     return available_space > 0 && text_width > available_space