export active_element + active_category from PeriodicTable.svelte

add prop element to ElementStats.svelte

changelog.md

@@ -6,6 +6,15 @@ All notable changes to this project will be documented in this file. Dates are d
 
 #### 0.1.0
 
+> 2023-01-03
+
+- move d3-array, d3-interpolate-path, d3-shape, d3-scale, @iconify/svelte from package devDeps to deps [`0898f1e`](https://github.com/janosh/periodic-table/commit/0898f1e3c2012cc012d751ea48dde4429e7c1666)
+- export active_element + active_category from PeriodicTable.svelte [`1ab602b`](https://github.com/janosh/periodic-table/commit/1ab602b26ceaf876a8683ba70d2a238dfc3652fc)
+- move types into src/lib/index.ts [`5072c76`](https://github.com/janosh/periodic-table/commit/5072c76003b3942b1ebcb6f7aee473cf1381c3e7)
+- add coverage badges to readme [`264e375`](https://github.com/janosh/periodic-table/commit/264e375614f0e4b84dc2d17c5d574c630478b1b2)
+- revert #13 `src/lib/element-data.{yml -> ts}` [`b3d11f9`](https://github.com/janosh/periodic-table/commit/b3d11f9218dca5a3a6b48d5387f735065e222e45)
+- add npm install cmd to readme [`278d17f`](https://github.com/janosh/periodic-table/commit/278d17f6323dc8051158c256446dc2872cade6ba)
+- move non-package components to new src/site dir [`ddeef16`](https://github.com/janosh/periodic-table/commit/ddeef16a26ae44e4d3fa997f8fa6b76eaee284de)
 - NPM Release [`#16`](https://github.com/janosh/periodic-table/pull/16)
 - Deploy site to GitHub Pages [`#15`](https://github.com/janosh/periodic-table/pull/15)
 - add test 'hooking PeriodicTable up to PropertySelect and selecting heatmap sets element tile background' [`#14`](https://github.com/janosh/periodic-table/pull/14)

readme.md

@@ -17,9 +17,9 @@ Interactive Periodic Table component written in Svelte. With scatter plot showin
 
 ![Screenshot of periodic table](static/2022-08-08-screenshot.png)
 
-## 📊   Heatmap
+## 📦   Heatmap
 
-Below a screenshot demonstrating the periodicity of elemental properties, i.e. why the periodic table is called periodic. In this case its showing recurring bumps and valleys in the first ionization energy as a function of atomic number.
+Below a screenshot demonstrating the periodicity of elemental properties, the reason it's called periodic table. In this case, you're seeing recurring bumps and valleys in the first ionization energy as a function of atomic number.
 
 ![Screenshot of periodic table heatmap](static/2022-08-08-screenshot-heatmap.png)
 

src/lib/ElementStats.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
+  import type { ChemicalElement } from '$lib'
   import ElementHeading from './ElementHeading.svelte'
   import Icon from './Icon.svelte'
   import { pretty_num } from './labels'
-  import { last_element } from './stores'
 
+  export let element: ChemicalElement | null
   export let style = ``
 
-  $: element = $last_element // variable needed to decide whether to show user tip
-
   const icon_phase_map = {
     Solid: `mdi:cube-outline`,
     Liquid: `mdi:water-outline`,

src/lib/PeriodicTable.svelte

@@ -2,11 +2,11 @@
   import { extent } from 'd3-array'
   import type { ScaleLinear } from 'd3-scale'
   import { scaleLinear, scaleLog } from 'd3-scale'
-  import type { ChemicalElement } from '.'
+  import type { Category, ChemicalElement } from '.'
   import element_data from './element-data'
   import ElementPhoto from './ElementPhoto.svelte'
   import ElementTile from './ElementTile.svelte'
-  import { active_category, active_element, last_element } from './stores'
+  import { last_element } from './stores'
 
   export let show_names = true
   export let show_numbers = true
@@ -20,6 +20,8 @@
   export let color_map: Record<number, string> | null = null
   export let log = false
   export let color_scale: ScaleLinear<number, number, never> | null = null
+  export let active_element: ChemicalElement | null = null
+  export let active_category: Category | null = null
 
   $: if (![0, 118].includes(heatmap_values.length)) {
     console.error(
@@ -34,7 +36,7 @@
 
   $: set_active_element = (element: ChemicalElement | null) => () => {
     if (disabled) return
-    $active_element = element
+    active_element = element
   }
 
   let window_width: number
@@ -50,8 +52,7 @@
     {@const value = heatmap_values?.length && heatmap_values[idx]}
     {@const heatmap_color = color_scale?.(value) ?? `transparent`}
     {@const active =
-      $active_category === category.replaceAll(` `, `-`) ||
-      $active_element?.name === name}
+      active_category === category.replaceAll(` `, `-`) || active_element?.name === name}
     <a
       href={name.toLowerCase()}
       data-sveltekit-noscroll
@@ -76,7 +77,7 @@
 
   {#if show_photo}
     <ElementPhoto
-      element_name={$active_element?.name}
+      element_name={active_element?.name}
       style="grid-area: 9/1/span 2/span 2;"
     />
   {/if}

src/lib/TableInset.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   export let grid_col = `3 / span 10`
   export let grid_row = `1 / span 3`
+  export let style: string | null = null
 </script>
 
-<aside style:grid-column={grid_col} style:grid-row={grid_row}>
+<aside style:grid-column={grid_col} style:grid-row={grid_row} {style}>
   <slot />
 </aside>
 

src/routes/+page.svelte

@@ -6,7 +6,7 @@
   import { property_labels } from '$lib/labels'
   import PeriodicTable from '$lib/PeriodicTable.svelte'
   import ScatterPlot from '$lib/ScatterPlot.svelte'
-  import { active_element, heatmap_key, last_element } from '$lib/stores'
+  import { active_category, active_element, heatmap_key, last_element } from '$lib/stores'
   import TableInset from '$lib/TableInset.svelte'
   import EasterEgg from '$site/EasterEgg.svelte'
   import PropertySelect from '$site/PropertySelect.svelte'
@@ -48,6 +48,8 @@
     heatmap_values={$heatmap_key ? element_data.map((el) => el[$heatmap_key]) : []}
     style="margin: 2em auto 4em;"
     bind:color_scale
+    bind:active_element={$active_element}
+    bind:active_category={$active_category}
   >
     <TableInset slot="inset">
       {#if $heatmap_key}
@@ -61,7 +63,7 @@
           {color_scale}
         />
       {:else}
-        <ElementStats --font-size="1vw" />
+        <ElementStats --font-size="1vw" element={$last_element} />
       {/if}
     </TableInset>
   </PeriodicTable>