matterviz 0.4.1 → 0.4.3

package/dist/composition/FormulaFilter.svelte

@@ -46,50 +46,27 @@
   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`],
     },
   ]
 
-  const SUBSCRIPT_TO_ASCII: Record<string, string> = {
-    [`\u2080`]: `0`,
-    [`\u2081`]: `1`,
-    [`\u2082`]: `2`,
-    [`\u2083`]: `3`,
-    [`\u2084`]: `4`,
-    [`\u2085`]: `5`,
-    [`\u2086`]: `6`,
-    [`\u2087`]: `7`,
-    [`\u2088`]: `8`,
-    [`\u2089`]: `9`,
-  }
-
-  const SUPERSCRIPT_TO_ASCII: Record<string, string> = {
-    [`\u2070`]: `0`,
-    [`\u00B9`]: `1`,
-    [`\u00B2`]: `2`,
-    [`\u00B3`]: `3`,
-    [`\u2074`]: `4`,
-    [`\u2075`]: `5`,
-    [`\u2076`]: `6`,
-    [`\u2077`]: `7`,
-    [`\u2078`]: `8`,
-    [`\u2079`]: `9`,
-    [`\u207A`]: `+`,
-    [`\u207B`]: `-`,
+  // Unicode subscript/superscript digits and signs -> ASCII equivalents
+  const UNICODE_TO_ASCII: Record<string, string> = {
+    ...Object.fromEntries([...`₀₁₂₃₄₅₆₇₈₉`].map((char, digit) => [char, `${digit}`])),
+    ...Object.fromEntries([...`⁰¹²³⁴⁵⁶⁷⁸⁹`].map((char, digit) => [char, `${digit}`])),
+    [`⁺`]: `+`,
+    [`⁻`]: `-`,
   }
 
   let {
@@ -155,52 +132,31 @@
   const has_storage = typeof localStorage !== `undefined`
   const history_pins_key = $derived(`${history_key}-pins`)
 
-  function load_history(): string[] {
+  function load_entries(key: string): string[] {
     if (max_history <= 0 || !has_storage) return []
     try {
-      const raw = localStorage.getItem(history_key)
-      if (!raw) return []
-      const parsed: unknown = JSON.parse(raw)
+      const parsed: unknown = JSON.parse(localStorage.getItem(key) ?? `null`)
       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`)
     } catch {
       return []
     }
   }
 
-  function save_history(entries: string[]): void {
+  function save_entries(key: string, entries: string[]): void {
     if (max_history <= 0 || !has_storage) return
     try {
-      localStorage.setItem(history_key, JSON.stringify(entries.slice(0, max_history)))
+      localStorage.setItem(key, JSON.stringify(entries))
     } catch {
       // localStorage may be unavailable (e.g. private browsing)
     }
   }
 
-  function load_pinned(): string[] {
-    if (max_history <= 0 || !has_storage) return []
-    try {
-      const raw = localStorage.getItem(history_pins_key)
-      if (!raw) return []
-      const parsed: unknown = JSON.parse(raw)
-      if (!Array.isArray(parsed)) return []
-      return parsed.filter((item): item is string => typeof item === `string`)
-    } catch {
-      return []
-    }
-  }
-
-  function save_pinned(entries: string[]): void {
-    if (max_history <= 0 || !has_storage) return
-    try {
-      localStorage.setItem(history_pins_key, JSON.stringify(entries))
-    } catch {
-      // localStorage may be unavailable
-    }
-  }
+  const load_history = () => load_entries(history_key).slice(0, max_history)
+  const load_pinned = () => load_entries(history_pins_key)
+  const save_history = (entries: string[]) =>
+    save_entries(history_key, entries.slice(0, max_history))
+  const save_pinned = (entries: string[]) => save_entries(history_pins_key, entries)
 
   let history = $state<string[]>(load_history())
   let pinned_history = $state<string[]>(load_pinned())
@@ -249,9 +205,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 +259,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
@@ -331,17 +285,16 @@
 
   function normalize_unicode_formula(input: string): string {
     let normalized = input
-    for (const [subscript, ascii] of Object.entries(SUBSCRIPT_TO_ASCII)) {
-      normalized = normalized.replaceAll(subscript, ascii)
-    }
-    for (const [superscript, ascii] of Object.entries(SUPERSCRIPT_TO_ASCII)) {
-      normalized = normalized.replaceAll(superscript, ascii)
+    for (const [unicode_char, ascii] of Object.entries(UNICODE_TO_ASCII)) {
+      normalized = normalized.replaceAll(unicode_char, 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,8 +309,9 @@
     try {
       const tokens = parse_formula_with_wildcards(sanitized_input)
       const explicit = tokens
-        .filter((token): token is { element: ElementSymbol; count: number } =>
-          token.element !== null
+        .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)
@@ -365,21 +319,19 @@
       // 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
@@ -388,16 +340,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)
@@ -413,13 +367,10 @@
     return `${prefix}${token.element}${suffix}`
   }
 
-  function token_chip_label(
+  // Chip labels show an explicit + prefix for include tokens; serialized values omit it
+  const token_chip_label = (
     token: Pick<FormulaFilterToken, `operator` | `element` | `constraint`>,
-  ): string {
-    const prefix = token.operator === `exclude` ? `-` : `+`
-    const suffix = token.constraint ? `:${token.constraint}` : ``
-    return `${prefix}${token.element}${suffix}`
-  }
+  ): string => (token.operator === `include` ? `+` : ``) + serialize_token(token)
 
   function parse_token(raw_token: string): FormulaFilterToken {
     const token = raw_token.trim()
@@ -429,8 +380,9 @@
     const is_wildcard = element === `*`
     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,
@@ -442,36 +394,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 {
@@ -510,9 +463,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(
@@ -521,14 +472,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,
@@ -559,7 +511,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 !== `*`)
@@ -569,18 +524,10 @@
     }
     // 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)) {
       const tokens = parse_formula_with_wildcards(trimmed)
-      const unique_elements: string[] = []
-      for (const token of tokens) {
-        if (token.element !== null && !unique_elements.includes(token.element)) {
-          unique_elements.push(token.element)
-        }
-      }
-      const elements = unique_elements.sort()
-      const wildcards = tokens.filter((token) => token.element === null).map(() =>
-        `*`
-      )
+      const elements = [...new Set(tokens.flatMap((token) => token.element ?? []))].sort()
+      const wildcards = tokens.filter((token) => token.element === null).map(() => `*`)
       return [...elements, ...wildcards]
     }
     try {
@@ -672,9 +619,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
       }
     }
   }
@@ -709,8 +654,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> = {
@@ -734,8 +679,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)
@@ -752,8 +698,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> = {
@@ -877,8 +823,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"
     >
@@ -959,11 +905,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"
@@ -1037,7 +979,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);
@@ -1127,24 +1071,7 @@
     font-size: 0.88em;
     color: inherit;
   }
-  .history-remove {
-    min-width: 24px;
-    min-height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 3pt;
-    border-radius: 50%;
-    opacity: 0.3;
-    color: inherit;
-    &:hover {
-      opacity: 0.8;
-      background: rgba(128, 128, 128, 0.15);
-    }
-  }
+  .history-remove,
   .history-pin {
     display: flex;
     align-items: center;
@@ -1161,6 +1088,10 @@
       background: rgba(128, 128, 128, 0.15);
     }
   }
+  .history-remove {
+    min-width: 24px;
+    min-height: 24px;
+  }
   .examples-wrapper {
     position: relative;
   }

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
@@ -81,15 +86,19 @@
           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 = element + (show_amounts ? String(amount) : ``) +
-            (show_percentages ? `${format_num(fraction, `.1~%`)}` : ``)
+          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,
@@ -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 {