matterviz 0.3.6 → 0.3.7

package/dist/composition/BarChart.svelte

@@ -0,0 +1,297 @@
+<script lang="ts">
+  import type { ColorSchemeName } from '../colors'
+  import { ELEMENT_COLOR_SCHEMES, pick_contrast_color } from '../colors'
+  import type { CompositionType } from './'
+  import type { ElementSymbol } from '../element'
+  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 { fractional_composition } from './parse'
+
+  type BarSegmentData = ChartSegmentData & {
+    x: number
+    width: number
+    can_show_label: boolean
+    needs_external_label: boolean
+    external_label_position: `above` | `below` | null
+    label_x: number
+    label_y: number
+  }
+
+  let {
+    composition,
+    size = 200,
+    bar_height = 30,
+    label_height = 20,
+    gap = 2,
+    min_segment_size_for_label = 15,
+    thin_segment_threshold = 0.2,
+    external_label_size_threshold = 5,
+    outer_corners_only = true,
+    show_labels = true,
+    show_percentages = false,
+    show_amounts = true,
+    color_scheme = `Vesta`,
+    segment_content,
+    interactive = true,
+    svg_node = $bindable(null),
+    children,
+    ...rest
+  }: SVGAttributes<SVGSVGElement> & {
+    composition: CompositionType
+    size?: number
+    bar_height?: number
+    label_height?: number
+    gap?: number
+    min_segment_size_for_label?: number
+    thin_segment_threshold?: number
+    external_label_size_threshold?: number
+    outer_corners_only?: boolean
+    show_labels?: boolean
+    show_percentages?: boolean
+    show_amounts?: boolean
+    color_scheme?: ColorSchemeName
+    segment_content?: Snippet<[BarSegmentData]>
+    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 svg_height = $derived(label_height + gap + bar_height + gap + label_height)
+  let bar_y = $derived(label_height + gap)
+  let above_labels_y = $derived(label_height / 2)
+  let below_labels_y = $derived(
+    label_height + gap + bar_height + gap + label_height / 2,
+  )
+
+  let segments = $derived.by(() => {
+    const element_entries = Object.entries(composition).filter(([_, amount]) =>
+      amount && amount > 0
+    ) as [ElementSymbol, number][]
+    if (element_entries.length === 0) return []
+
+    let [current_x, above_labels, below_labels] = [0, 0, 0]
+
+    return element_entries.map(([element, amount]) => {
+      const fraction = fractions[element] || 0
+      const color = element_colors[element] || `#cccccc`
+      const width = fraction * size
+      const x = current_x
+      current_x += width
+
+      const segment_size = Math.min(width, size)
+      const base_scale = Math.min(2, Math.max(1, segment_size / 40))
+      const label_text = element + (show_amounts ? amount?.toString() ?? `` : ``) +
+        (show_percentages ? `${format_num(fraction, `.1~%`)}` : ``)
+      const font_scale = get_chart_font_scale(
+        base_scale,
+        label_text,
+        segment_size * 0.9,
+        0.6,
+        12,
+      )
+
+      // Label positioning
+      const can_show_label = segment_size >= min_segment_size_for_label
+      const is_thin = fraction < thin_segment_threshold
+      const can_show_external_label = segment_size >= external_label_size_threshold
+      const needs_external_label = is_thin && can_show_external_label
+
+      let external_label_position: `above` | `below` | null = null
+      if (needs_external_label) {
+        external_label_position = above_labels <= below_labels ? `above` : `below`
+        if (external_label_position === `above`) above_labels++
+        else below_labels++
+      }
+
+      const text_color = pick_contrast_color({ bg_color: color })
+      const label_props = {
+        font_scale,
+        text_color,
+        can_show_label,
+        needs_external_label,
+        external_label_position,
+        label_x: x + width / 2,
+        label_y: bar_y + bar_height / 2,
+      }
+      return { element, amount, fraction, color, x, width, ...label_props }
+    })
+  })
+
+  let hovered_element: ElementSymbol | null = $state(null)
+  // Generate unique ID for clipPath to avoid collisions across BarCharts
+  let clip_path_id = $derived(`bar-clip-${crypto.randomUUID()}`)
+</script>
+
+{#snippet label_content(segment: BarSegmentData)}
+  <tspan class="element-symbol" style:font-size="{10 * segment.font_scale}px">
+    {segment.element}
+  </tspan>
+  {#if show_amounts || show_percentages}
+    <tspan class="amount" style:font-size="{6.5 * segment.font_scale}px" dx="1" dy="5">
+      {show_amounts ? segment.amount : ``}{show_amounts && show_percentages ? `=` : ``}{
+        show_percentages ? format_num(segment.fraction, `.1~%`) : ``
+      }
+    </tspan>
+  {/if}
+{/snippet}
+
+<svg
+  viewBox="0 0 {size} {svg_height}"
+  {...rest}
+  class="bar-chart {rest.class ?? ``}"
+  style:max-width="{size}px"
+  bind:this={svg_node}
+>
+  <!-- Background and border -->
+  <rect
+    x="0"
+    y={bar_y}
+    width={size}
+    height={bar_height}
+    fill="var(--bar-bg)"
+    stroke="var(--bar-border, none)"
+  />
+
+  <!-- External labels above -->
+  {#each segments as segment (segment.element)}
+    {#if show_labels && segment.needs_external_label &&
+      segment.external_label_position === `above`}
+      <text
+        x={segment.label_x}
+        y={above_labels_y}
+        text-anchor="middle"
+        class="external-label"
+        class:hovered={hovered_element === segment.element}
+        style:fill={segment.color}
+      >
+        {@render label_content(segment)}
+      </text>
+    {/if}
+  {/each}
+
+  <!-- Bar segments -->
+  <defs>
+    <clipPath id={clip_path_id}>
+      <rect
+        x="0"
+        y={bar_y}
+        width={size}
+        height={bar_height}
+        rx={outer_corners_only ? 2 : 0}
+        ry={outer_corners_only ? 2 : 0}
+      />
+    </clipPath>
+  </defs>
+
+  <g clip-path="url(#{clip_path_id})">
+    {#each segments as segment (segment.element)}
+      <rect
+        x={segment.x}
+        y={bar_y}
+        width={segment.width}
+        height={bar_height}
+        fill={segment.color}
+        stroke="white"
+        stroke-width={hovered_element === segment.element ? 1.5 : 1}
+        class="bar-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>
+      </rect>
+      {#if segment_content}
+        {@render segment_content(segment)}
+      {/if}
+    {/each}
+  </g>
+
+  <!-- Internal labels -->
+  {#each segments as segment (segment.element)}
+    {#if show_labels && segment.can_show_label && !segment.needs_external_label}
+      <text
+        x={segment.label_x}
+        y={segment.label_y}
+        text-anchor="middle"
+        dominant-baseline={show_amounts || show_percentages ? `middle` : `central`}
+        class="bar-label"
+        style:fill={segment.text_color}
+      >
+        {@render label_content(segment)}
+      </text>
+    {/if}
+  {/each}
+
+  <!-- External labels below -->
+  {#each segments as segment (segment.element)}
+    {#if show_labels && segment.needs_external_label &&
+      segment.external_label_position === `below`}
+      <text
+        x={segment.label_x}
+        y={below_labels_y}
+        text-anchor="middle"
+        class="external-label"
+        class:hovered={hovered_element === segment.element}
+        style:fill={segment.color}
+      >
+        {@render label_content(segment)}
+      </text>
+    {/if}
+  {/each}
+
+  {@render children?.({ hovered_element })}
+</svg>
+
+<style>
+  .bar-chart {
+    display: inline-block;
+    --bar-bg: light-dark(#fff, #333);
+  }
+  .bar-segment {
+    transition: all 0.2s ease;
+  }
+  .bar-segment.interactive {
+    cursor: pointer;
+  }
+  .bar-segment.interactive:hover, .bar-segment.hovered {
+    filter: brightness(1.1);
+  }
+  .bar-segment.interactive:focus {
+    outline: 2px solid var(--focus-color, #0066cc);
+    outline-offset: 2px;
+  }
+  .external-label, .bar-label {
+    transition: all 0.2s ease;
+    pointer-events: none;
+  }
+  .external-label.hovered, .bar-label.hovered {
+    font-weight: 700;
+  }
+  .element-symbol {
+    font-weight: 700;
+  }
+  .amount {
+    font-weight: 500;
+  }
+</style>

package/dist/composition/BarChart.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { ColorSchemeName } from '../colors';
+import type { CompositionType } from './';
+import type { ElementSymbol } from '../element';
+import type { Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import { type ChartSegmentData } from './index';
+type BarSegmentData = ChartSegmentData & {
+    x: number;
+    width: number;
+    can_show_label: boolean;
+    needs_external_label: boolean;
+    external_label_position: `above` | `below` | null;
+    label_x: number;
+    label_y: number;
+};
+type $$ComponentProps = SVGAttributes<SVGSVGElement> & {
+    composition: CompositionType;
+    size?: number;
+    bar_height?: number;
+    label_height?: number;
+    gap?: number;
+    min_segment_size_for_label?: number;
+    thin_segment_threshold?: number;
+    external_label_size_threshold?: number;
+    outer_corners_only?: boolean;
+    show_labels?: boolean;
+    show_percentages?: boolean;
+    show_amounts?: boolean;
+    color_scheme?: ColorSchemeName;
+    segment_content?: Snippet<[BarSegmentData]>;
+    interactive?: boolean;
+    svg_node?: SVGSVGElement | null;
+    children?: Snippet<[{
+        hovered_element: ElementSymbol | null;
+    }]>;
+};
+declare const BarChart: import("svelte").Component<$$ComponentProps, {}, "svg_node">;
+type BarChart = ReturnType<typeof BarChart>;
+export default BarChart;

package/dist/composition/BubbleChart.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+  import type { ColorSchemeName } from '../colors'
+  import { ELEMENT_COLOR_SCHEMES, pick_contrast_color } from '../colors'
+  import type { CompositionType } from './'
+  import type { ElementSymbol } from '../element'
+  import { hierarchy, pack } from 'd3-hierarchy'
+  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 } from './parse'
+
+  type BubbleSegmentData = ChartSegmentData & { radius: number; x: number; y: number }
+
+  let {
+    composition,
+    size = 200,
+    padding = 0,
+    show_labels = true,
+    show_amounts = true,
+    color_scheme = `Vesta`,
+    bubble_content,
+    interactive = true,
+    svg_node = $bindable(null),
+    children,
+    ...rest
+  }: SVGAttributes<SVGSVGElement> & {
+    composition: CompositionType
+    size?: number
+    padding?: number
+    show_labels?: boolean
+    show_amounts?: boolean
+    color_scheme?: ColorSchemeName
+    bubble_content?: Snippet<[BubbleSegmentData]>
+    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,
+  )
+
+  // Calculate bubble data with proper circle packing
+  let bubbles = $derived.by<BubbleSegmentData[]>(() => {
+    const element_entries = Object.entries(composition).filter(
+      ([_, amount]) => amount && amount > 0,
+    )
+    if (element_entries.length === 0) return []
+
+    // Create hierarchy data structure for D3 pack
+    type Child = { element: string; amount: number; color: string }
+    type HierarchyData = { children: Child[] }
+
+    const hierarchy_data: HierarchyData = {
+      children: element_entries.map(([element, amount]) => ({
+        element,
+        amount: amount ?? 0,
+        color: element_colors[element] || `#cccccc`,
+      })),
+    }
+
+    // Use D3's pack layout for proper circle packing
+    const pack_layout = pack<HierarchyData | Child>().size([
+      size - 2 * padding,
+      size - 2 * padding,
+    ]).padding(padding * 0.1) // Small padding between circles
+
+    const root = pack_layout(
+      hierarchy<HierarchyData | Child>(hierarchy_data).sum(
+        (data) => (`amount` in data ? data.amount : 0),
+      ),
+    )
+
+    // Get max radius for font scaling
+    const max_radius = Math.max(...root.leaves().map((data) => data.r || 0))
+    const total_atoms = count_atoms_in_composition(composition)
+
+    return root.leaves().map((node) => {
+      const radius = node.r || 0
+      const data = node.data as Child
+
+      // Calculate font scale based on bubble size and smart text fitting
+      const [min_font_scale, max_font_scale] = [0.6, 2] as const
+      const scale_factor = radius / max_radius
+      const base_scale = min_font_scale +
+        scale_factor * (max_font_scale - min_font_scale)
+      const label_text = data.element + (show_amounts ? data.amount.toString() : ``)
+      const available_space = radius * 2 * 0.8 // 80% of bubble diameter for text
+      const font_scale = get_chart_font_scale(base_scale, label_text, available_space)
+
+      return {
+        element: data.element as ElementSymbol,
+        amount: data.amount,
+        fraction: total_atoms > 0 ? data.amount / total_atoms : 0,
+        radius,
+        x: (node.x || 0) + padding, // Offset by padding
+        y: (node.y || 0) + padding,
+        color: data.color,
+        font_scale,
+        text_color: pick_contrast_color({ bg_color: data.color }),
+      }
+    })
+  })
+
+  let hovered_element: ElementSymbol | null = $state(null)
+</script>
+
+<svg
+  viewBox="0 0 {size} {size}"
+  style:max-width="{size}px"
+  {...rest}
+  class="bubble-chart {rest.class ?? ``}"
+  bind:this={svg_node}
+>
+  {#each bubbles as bubble (bubble.element)}
+    <circle
+      cx={bubble.x}
+      cy={bubble.y}
+      r={bubble.radius}
+      fill={bubble.color}
+      stroke="white"
+      stroke-width={hovered_element === bubble.element ? 1.5 : 1}
+      class="bubble"
+      class:interactive
+      class:hovered={hovered_element === bubble.element}
+      onmouseenter={() => interactive && (hovered_element = bubble.element)}
+      onmouseleave={() => interactive && (hovered_element = null)}
+      {...interactive && {
+        role: `button`,
+        tabindex: 0,
+        'aria-label': `${bubble.element}: ${bubble.amount} ${
+          bubble.amount === 1 ? `atom` : `atoms`
+        }`,
+      }}
+    >
+      <title>
+        {bubble.element}: {bubble.amount} {bubble.amount === 1 ? `atom` : `atoms`}
+      </title>
+    </circle>
+
+    {#if bubble_content}
+      {@render bubble_content(bubble)}
+    {/if}
+  {/each}
+
+  {#if show_labels}
+    {#each bubbles as bubble (bubble.element)}
+      <foreignObject
+        x={bubble.x - (size * 0.15 * bubble.font_scale) / 2}
+        y={bubble.y - (size * 0.075 * bubble.font_scale) / 2}
+        width={size * 0.15 * bubble.font_scale}
+        height={size * 0.075 * bubble.font_scale}
+        class="bubble-label-container"
+        class:hovered={hovered_element === bubble.element}
+      >
+        <div class="bubble-label" style:color={bubble.text_color}>
+          <span class="element-symbol" style:font-size="{14 * bubble.font_scale}px">{
+            bubble.element
+          }</span>
+          {#if show_amounts}
+            <sub class="amount" style:font-size="{8 * bubble.font_scale}px">{
+              bubble.amount
+            }</sub>
+          {/if}
+        </div>
+      </foreignObject>
+    {/each}
+  {/if}
+
+  {@render children?.({ hovered_element })}
+</svg>
+
+<style>
+  .bubble {
+    transition: all 0.2s ease;
+  }
+  .bubble.interactive {
+    cursor: pointer;
+  }
+  .bubble.interactive:hover, .bubble.hovered {
+    filter: brightness(1.1);
+  }
+  .bubble.interactive:focus {
+    outline: none;
+  }
+  .bubble-label-container {
+    pointer-events: none;
+    transition: all 0.2s ease;
+  }
+  .bubble-label-container.hovered {
+    font-weight: 700;
+  }
+  .bubble-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    font-weight: 600;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+  }
+  foreignobject {
+    overflow: visible;
+  }
+  .bubble-label.hovered {
+    font-weight: 700;
+  }
+  .element-symbol {
+    font-weight: 700;
+  }
+  .amount {
+    font-weight: 500;
+    margin-left: 1px;
+    transform: translateY(5px);
+  }
+</style>

package/dist/composition/BubbleChart.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { ColorSchemeName } from '../colors';
+import type { CompositionType } from './';
+import type { ElementSymbol } from '../element';
+import type { Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import { type ChartSegmentData } from './index';
+type BubbleSegmentData = ChartSegmentData & {
+    radius: number;
+    x: number;
+    y: number;
+};
+type $$ComponentProps = SVGAttributes<SVGSVGElement> & {
+    composition: CompositionType;
+    size?: number;
+    padding?: number;
+    show_labels?: boolean;
+    show_amounts?: boolean;
+    color_scheme?: ColorSchemeName;
+    bubble_content?: Snippet<[BubbleSegmentData]>;
+    interactive?: boolean;
+    svg_node?: SVGSVGElement | null;
+    children?: Snippet<[{
+        hovered_element: ElementSymbol | null;
+    }]>;
+};
+declare const BubbleChart: import("svelte").Component<$$ComponentProps, {}, "svg_node">;
+type BubbleChart = ReturnType<typeof BubbleChart>;
+export default BubbleChart;