matterviz 0.3.4 → 0.3.6

package/dist/composition/BarChart.svelte

@@ -1,297 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-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

@@ -1,218 +0,0 @@
-<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

@@ -1,28 +0,0 @@
-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;