matterviz 0.3.4 → 0.3.6

package/dist/src/lib/composition/PieChart.svelte

@@ -0,0 +1,323 @@
+<script lang="ts">
+  import type { ColorSchemeName } from '$lib/colors'
+  import { ELEMENT_COLOR_SCHEMES, pick_contrast_color } from '$lib/colors'
+  import type { CompositionType } from '$lib/composition'
+  import type { ElementSymbol } from '$lib/element'
+  import { format_num } from '$lib/labels'
+  import type { Snippet } from 'svelte'
+  import type { SVGAttributes } from 'svelte/elements'
+  import { type ChartSegmentData, get_chart_font_scale } from './index'
+  import { count_atoms_in_composition, fractional_composition } from './parse'
+
+  // Constants for pie chart calculations
+  const VERY_THIN_SLICE_THRESHOLD = 20 // degrees
+  const MEDIUM_SLICE_THRESHOLD = 90 // degrees - increased to move more slices toward outer edge
+  const MAX_ANGLE_FOR_FULL_SCALE = 120 // degrees
+
+  type PieSegmentData = ChartSegmentData & {
+    start_angle: number
+    end_angle: number
+    path: string
+    label_x: number
+    label_y: number
+    is_outside_slice: boolean
+  }
+  let {
+    composition,
+    size = 200,
+    stroke_width = 0.5,
+    inner_radius = 0,
+    show_labels = true,
+    show_percentages = false,
+    show_amounts = true,
+    color_scheme = `Vesta`,
+    center_content,
+    segment_content,
+    interactive = true,
+    svg_node = $bindable(null),
+    children,
+    ...rest
+  }: SVGAttributes<SVGSVGElement> & {
+    composition: CompositionType
+    size?: number
+    stroke_width?: number
+    inner_radius?: number
+    show_labels?: boolean
+    show_percentages?: boolean
+    show_amounts?: boolean
+    color_scheme?: ColorSchemeName
+    center_content?: Snippet<[{ composition: CompositionType; total_atoms: number }]>
+    segment_content?: Snippet<[PieSegmentData]>
+    interactive?: boolean
+    svg_node?: SVGSVGElement | null
+    children?: Snippet<[{ hovered_element: ElementSymbol | null }]>
+  } = $props()
+
+  let element_colors = $derived(
+    ELEMENT_COLOR_SCHEMES[color_scheme] || ELEMENT_COLOR_SCHEMES.Vesta,
+  )
+  let fractions = $derived(fractional_composition(composition))
+  let total_atoms = $derived(count_atoms_in_composition(composition))
+  let outer_radius = $derived(size / 2 - stroke_width)
+  let inner_radius_adjusted = $derived(Math.min(inner_radius, outer_radius - 10))
+  let center = $derived(size / 2)
+
+  // Calculate pie segments
+  let segments = $derived.by(() => {
+    let current_angle = -90 // Start from top
+
+    return Object.entries(composition)
+      .filter(([_, amount]) => amount && amount > 0)
+      .map(([element_key, amount]) => {
+        const element = element_key as ElementSymbol
+        const fraction = fractions[element] || 0
+        const color = element_colors[element] || `#cccccc`
+
+        // Single element: full circle with no radial stroke line, label at center
+        if (fraction === 1) {
+          const r = 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~%`)}` : ``)
+          return {
+            element,
+            amount,
+            fraction,
+            color,
+            start_angle: -90,
+            end_angle: 270,
+            path,
+            label_x: center,
+            label_y: center,
+            is_outside_slice: false,
+            font_scale: get_chart_font_scale(2.6, label_text, r * 2),
+            text_color: pick_contrast_color({ bg_color: color }),
+          }
+        }
+
+        const angle_span = fraction * 360
+        const start_angle = current_angle
+        const end_angle = current_angle + angle_span
+
+        current_angle = end_angle
+
+        // Convert to radians for calculations
+        const start_rad = (start_angle * Math.PI) / 180
+        const end_rad = (end_angle * Math.PI) / 180
+        const mid_rad = (((start_angle + end_angle) / 2) * Math.PI) / 180
+
+        // Arc coordinates for outer radius
+        const x1_outer = center + outer_radius * Math.cos(start_rad)
+        const y1_outer = center + outer_radius * Math.sin(start_rad)
+        const x2_outer = center + outer_radius * Math.cos(end_rad)
+        const y2_outer = center + outer_radius * Math.sin(end_rad)
+
+        // Arc coordinates for inner radius
+        const x1_inner = center + inner_radius_adjusted * Math.cos(start_rad)
+        const y1_inner = center + inner_radius_adjusted * Math.sin(start_rad)
+        const x2_inner = center + inner_radius_adjusted * Math.cos(end_rad)
+        const y2_inner = center + inner_radius_adjusted * Math.sin(end_rad)
+
+        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`
+
+        // 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
+
+        let label_radius: number
+        let is_outside_slice = false
+
+        if (is_very_thin_slice) {
+          // Very thin slices: place outside with distance proportional to chart size
+          label_radius = outer_radius + outer_radius * 0.2
+          is_outside_slice = true
+        } else if (is_medium_slice) {
+          // Medium slices: place closer to outer edge, proportional to chart size
+          label_radius = outer_radius - outer_radius * 0.3
+          is_outside_slice = false
+        } else {
+          // Large slices: place in middle of ring
+          label_radius = (outer_radius + inner_radius_adjusted) / 2
+          is_outside_slice = false
+        }
+
+        // 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 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
+          )
+
+        const font_scale = get_chart_font_scale(
+          base_scale,
+          label_text,
+          available_space,
+        )
+
+        return {
+          element,
+          amount,
+          fraction,
+          color,
+          start_angle,
+          end_angle,
+          path,
+          label_x: center + label_radius * Math.cos(mid_rad),
+          label_y: center + label_radius * Math.sin(mid_rad),
+          is_outside_slice,
+          font_scale,
+          text_color: is_outside_slice
+            ? `var(--text-color, #333)`
+            : pick_contrast_color({ bg_color: color }),
+        }
+      })
+  })
+
+  let hovered_element: ElementSymbol | null = $state(null)
+</script>
+
+<svg
+  viewBox="0 0 {size} {size}"
+  style:max-width="{size}px"
+  {...rest}
+  class="pie-chart {rest.class ?? ``}"
+  bind:this={svg_node}
+>
+  {#each segments as segment (segment.element)}
+    <path
+      d={segment.path}
+      fill={segment.color}
+      stroke="white"
+      stroke-width={segments.length === 1
+      ? 0
+      : hovered_element === segment.element
+      ? stroke_width + 1
+      : stroke_width}
+      class="pie-segment"
+      class:interactive
+      class:hovered={hovered_element === segment.element}
+      onmouseenter={() => interactive && (hovered_element = segment.element)}
+      onmouseleave={() => interactive && (hovered_element = null)}
+      {...interactive && {
+        role: `button`,
+        tabindex: 0,
+        'aria-label': `${segment.element}: ${segment.amount} ${
+          segment.amount === 1 ? `atom` : `atoms`
+        } (${format_num(segment.fraction, `.1~%`)})`,
+      }}
+    >
+      <title>
+        {segment.element}: {segment.amount}
+        {segment.amount === 1 ? `atom` : `atoms`} ({format_num(segment.fraction, `.1~%`)})
+      </title>
+    </path>
+
+    {#if segment_content}
+      {@render segment_content(segment)}
+    {/if}
+  {/each}
+
+  {#if show_labels}
+    {#each segments as segment (segment.element)}
+      <foreignObject
+        x={segment.label_x - (size * 0.15 * segment.font_scale) / 2}
+        y={segment.label_y - (size * 0.075 * segment.font_scale) / 2}
+        width={size * 0.15 * segment.font_scale}
+        height={size * 0.075 * segment.font_scale}
+        class:hovered={hovered_element === segment.element}
+      >
+        <div
+          class="pie-label"
+          class:inside-slice={!segment.is_outside_slice}
+          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>
+          {#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>
+          {/if}
+        </div>
+      </foreignObject>
+    {/each}
+  {/if}
+
+  {#if center_content}
+    <g class="center-content">
+      {@render center_content({ composition, total_atoms })}
+    </g>
+  {/if}
+
+  {@render children?.({ hovered_element })}
+</svg>
+
+<style>
+  .pie-segment {
+    transition: all 0.2s ease;
+  }
+  .pie-segment.interactive {
+    cursor: pointer;
+  }
+  .pie-segment.interactive:hover, .pie-segment.hovered {
+    filter: brightness(1.1);
+  }
+  .pie-segment.interactive:focus {
+    outline: none;
+  }
+  foreignobject {
+    pointer-events: none;
+    transition: all 0.2s ease;
+  }
+  foreignobject.hovered {
+    font-weight: 700;
+  }
+  .pie-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+  }
+  foreignobject {
+    overflow: visible;
+  }
+  .pie-label.hovered {
+    font-weight: 700;
+  }
+  .amount {
+    margin-left: 1px;
+    transform: translateY(5pt);
+  }
+</style>

package/dist/src/lib/composition/format.ts

@@ -0,0 +1,155 @@
+import type { ElementSymbol } from '$lib/element'
+import type { AnyStructure } from '$lib/structure'
+import type { CompositionType } from '$lib/composition'
+import { format_num } from '$lib/labels'
+import { ELEMENT_ELECTRONEGATIVITY_MAP, is_valid_element, parse_composition } from './parse'
+
+// Extract composition from structure object
+const structure_to_composition = (structure: AnyStructure): CompositionType => {
+  if (!structure.sites || !Array.isArray(structure.sites)) {
+    throw new Error(`Invalid structure object`)
+  }
+
+  const composition: CompositionType = {}
+  for (const site of structure.sites) {
+    if (site.species && Array.isArray(site.species)) {
+      for (const species of site.species) {
+        const element = species.element
+        const occu = species.occu ?? 1
+        composition[element] = (composition[element] ?? 0) + occu
+      }
+    }
+  }
+  return composition
+}
+
+const is_structure_like = (input: CompositionType | AnyStructure): input is AnyStructure =>
+  `sites` in input || `lattice` in input
+
+// Format composition into chemical formula string
+export const format_composition_formula = (
+  composition: CompositionType,
+  sort_fn: (symbols: ElementSymbol[]) => ElementSymbol[],
+  plain_text = false,
+  delim = ` `,
+  amount_format = `.3~s`,
+): string => {
+  const symbols = Object.keys(composition).filter(is_valid_element)
+
+  return sort_fn(symbols)
+    .filter((el) => composition[el] && composition[el] > 0)
+    .map((el) => {
+      const amount = composition[el]
+      if (amount === 1) return el
+      const formatted_amount = format_num(Number(amount), amount_format)
+      return plain_text ? `${el}${formatted_amount}` : `${el}<sub>${formatted_amount}</sub>`
+    })
+    .join(delim)
+}
+
+// Generic formula formatter with error handling
+const format_formula_generic = (
+  input: string | CompositionType | AnyStructure,
+  sort_fn: (symbols: ElementSymbol[]) => ElementSymbol[],
+  plain_text = false,
+  delim = ` `,
+  amount_format = `.3~s`,
+): string => {
+  try {
+    let composition: CompositionType
+
+    if (typeof input === `string`) composition = parse_composition(input)
+    else if (is_structure_like(input)) composition = structure_to_composition(input)
+    else composition = input
+
+    return format_composition_formula(composition, sort_fn, plain_text, delim, amount_format)
+  } catch {
+    return ``
+  }
+}
+
+// Create alphabetical formula
+export const get_alphabetical_formula = (
+  input: string | CompositionType | AnyStructure,
+  plain_text = false,
+  delim = ` `,
+  amount_format = `.3~s`,
+): string =>
+  format_formula_generic(input, (symbols) => symbols.sort(), plain_text, delim, amount_format)
+
+export const sort_by_electronegativity = (symbols: ElementSymbol[]): ElementSymbol[] =>
+  symbols.sort((el_1, el_2) => {
+    const elec_neg_1 = ELEMENT_ELECTRONEGATIVITY_MAP.get(el_1) ?? 0
+    const elec_neg_2 = ELEMENT_ELECTRONEGATIVITY_MAP.get(el_2) ?? 0
+    return elec_neg_1 !== elec_neg_2 ? elec_neg_1 - elec_neg_2 : el_1.localeCompare(el_2)
+  })
+
+// Sort element symbols according to Hill notation (C first, H second, then alphabetical).
+// This is the standard notation for organic compounds in chemistry.
+export const sort_by_hill_notation = (symbols: ElementSymbol[]): ElementSymbol[] => {
+  const has_carbon = symbols.includes(`C`)
+  return symbols.sort((el_a, el_b) => {
+    // Equal elements must return 0 (sort invariant)
+    if (el_a === el_b) return 0
+    // Carbon always comes first
+    if (el_a === `C`) return -1
+    if (el_b === `C`) return 1
+    // If carbon present, hydrogen comes second
+    if (has_carbon) {
+      if (el_a === `H`) return -1
+      if (el_b === `H`) return 1
+    }
+    return el_a.localeCompare(el_b) // All other elements alphabetically
+  })
+}
+
+// Create electronegativity-sorted formula
+export const get_electro_neg_formula = (
+  input: string | CompositionType | AnyStructure,
+  plain_text = false,
+  delim = ` `,
+  amount_format = `.3~f`,
+): string =>
+  format_formula_generic(input, sort_by_electronegativity, plain_text, delim, amount_format)
+
+export interface FormulaLabelSegment {
+  text: string
+  subscript: boolean
+}
+
+export function get_formula_label_segments(formula: string): FormulaLabelSegment[] {
+  const segments: FormulaLabelSegment[] = []
+  let cursor = 0
+
+  for (const match of formula.matchAll(/([A-Za-z])(\d+(?:\.\d+)?)/g)) {
+    const match_idx = match.index ?? 0
+    const prefix = match[1]
+    const amount = match[2]
+    const amount_idx = match_idx + prefix.length
+    if (amount_idx > cursor) {
+      segments.push({ text: formula.slice(cursor, amount_idx), subscript: false })
+    }
+    segments.push({ text: amount, subscript: true })
+    cursor = amount_idx + amount.length
+  }
+
+  if (cursor < formula.length) {
+    segments.push({ text: formula.slice(cursor), subscript: false })
+  }
+  return segments.length > 0 ? segments : [{ text: formula, subscript: false }]
+}
+
+// Create Hill notation formula (C first, H second, then alphabetical)
+export const get_hill_formula = (
+  input: string | CompositionType | AnyStructure,
+  plain_text = false,
+  delim = ` `,
+  amount_format = `.3~s`,
+): string =>
+  format_formula_generic(input, sort_by_hill_notation, plain_text, delim, amount_format)
+
+export function format_oxi_state(oxidation?: number): string {
+  if (oxidation === undefined || oxidation === 0) return ``
+  const sign = oxidation > 0 ? `+` : `-`
+  return `${sign}${Math.abs(oxidation)}`
+}

package/dist/src/lib/composition/index.ts

@@ -0,0 +1,37 @@
+import type { ElementSymbol } from '$lib/element'
+
+export { default as BarChart } from './BarChart.svelte'
+export { default as BubbleChart } from './BubbleChart.svelte'
+export { default as Composition } from './Composition.svelte'
+export * from './format'
+export { default as Formula } from './Formula.svelte'
+export { default as FormulaFilter } from './FormulaFilter.svelte'
+export * from './parse'
+export { default as PieChart } from './PieChart.svelte'
+
+export type CompositionType = Partial<Record<ElementSymbol, number>>
+export type FormulaSearchMode = `elements` | `chemsys` | `exact`
+
+// Base data type for args of all (bar, bubble, pie) chart segment snippets
+export type ChartSegmentData = {
+  element: ElementSymbol
+  amount: number
+  fraction: number
+  color: string
+  font_scale: number
+  text_color: string
+}
+
+export function get_chart_font_scale(
+  base_scale: number,
+  label_text: string,
+  available_space: number,
+  min_scale_factor = 0.7,
+  base_font_size = 16,
+): number {
+  const text_width = label_text.length * 0.6 * base_font_size * base_scale
+
+  return available_space > 0 && text_width > available_space
+    ? Math.max(base_scale * (available_space / text_width), base_scale * min_scale_factor)
+    : base_scale
+}