matterviz 0.1.12 → 0.1.13

package/dist/plot/BarPlot.svelte.d.ts

@@ -1,39 +1,23 @@
-import { DraggablePane } from '..';
-import type { BarMode, BarSeries, BarTooltipProps, LegendConfig, Orientation, Sides } from './';
-import type { TicksOption } from './scales';
-import type { ComponentProps, Snippet } from 'svelte';
+import type { AxisConfig, BarMode, BarSeries, BarStyle, BarTooltipProps, BasePlotProps, DisplayConfig, LegendConfig, LineStyle, Orientation, UserContentProps } from './';
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & BasePlotProps & {
     series?: BarSeries[];
+    x_axis?: AxisConfig;
+    y_axis?: AxisConfig;
+    y2_axis?: AxisConfig;
+    display?: DisplayConfig;
+    hovered?: boolean;
+    show_controls?: boolean;
+    controls_open?: boolean;
     orientation?: Orientation;
     mode?: BarMode;
-    x_lim?: [number | null, number | null];
-    y_lim?: [number | null, number | null];
-    x_range?: [number | null, number | null];
-    y_range?: [number | null, number | null];
-    range_padding?: number;
-    x_label?: string;
-    x_label_shift?: {
-        x?: number;
-        y?: number;
-    };
-    y_label?: string;
-    y_label_shift?: {
-        x?: number;
-        y?: number;
-    };
-    x_format?: string;
-    y_format?: string;
-    x_ticks?: TicksOption;
-    y_ticks?: TicksOption;
-    x_grid?: boolean | Record<string, unknown>;
-    y_grid?: boolean | Record<string, unknown>;
-    show_zero_lines?: boolean;
     legend?: LegendConfig | null;
-    padding?: Sides;
-    default_bar_color?: string;
+    show_legend?: boolean;
+    bar?: BarStyle;
+    line?: LineStyle;
     tooltip?: Snippet<[BarTooltipProps]>;
-    hovered?: boolean;
+    user_content?: Snippet<[UserContentProps]>;
     change?: (data: BarTooltipProps | null) => void;
     on_bar_click?: (data: BarTooltipProps & {
         event: MouseEvent | KeyboardEvent;
@@ -41,12 +25,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     on_bar_hover?: (data: BarTooltipProps & {
         event: MouseEvent;
     } | null) => void;
-    show_controls?: boolean;
-    controls_open?: boolean;
-    plot_controls?: Snippet<[]>;
-    controls_toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
-    children?: Snippet<[]>;
-}
-declare const BarPlot: import("svelte").Component<Props, {}, "orientation" | "mode" | "show_controls" | "show_zero_lines" | "x_grid" | "y_grid" | "x_format" | "y_format" | "x_ticks" | "y_ticks" | "controls_open" | "hovered" | "series" | "x_label" | "y_label" | "x_label_shift" | "y_label_shift">;
+};
+declare const BarPlot: import("svelte").Component<$$ComponentProps, {}, "display" | "line" | "orientation" | "mode" | "bar" | "show_controls" | "y_axis" | "y2_axis" | "series" | "x_axis" | "hovered" | "controls_open">;
 type BarPlot = ReturnType<typeof BarPlot>;
 export default BarPlot;

package/dist/plot/BarPlotControls.svelte

@@ -1,204 +1,36 @@
-<script lang="ts">import { DraggablePane, SettingsSection } from '..';
-import { DEFAULTS } from '../settings';
-let { show_controls = $bindable(false), controls_open = $bindable(false), orientation = $bindable(`vertical`), mode = $bindable(`overlay`), x_grid = $bindable(true), y_grid = $bindable(true), x_ticks = $bindable(8), y_ticks = $bindable(6), x_format = $bindable(``), y_format = $bindable(``), x_range = $bindable(undefined), y_range = $bindable(undefined), auto_x_range = [0, 1], auto_y_range = [0, 1], plot_controls, toggle_props, pane_props, } = $props();
-function set_auto_ranges() {
-    x_range = [...auto_x_range];
-    y_range = [...auto_y_range];
-}
-// Handlers similar to Histogram/Scatter controls
-const ticks_input_handler = (axis) => (event) => {
-    const input = event.target;
-    const value = parseInt(input.value, 10);
-    if (!Number.isNaN(value) && value > 0) {
-        if (axis === `x`)
-            x_ticks = value;
-        else
-            y_ticks = value;
-    }
-};
-// Element refs for per-instance range inputs
-const range_inputs = $state({
-    x: { min: null, max: null },
-    y: { min: null, max: null },
-});
-// Applies the min/max inputs for the given axis after blur/Enter.
-// - Validates the pair (min < max)
-// - When both inputs are empty, clears the bound range to fall back to auto
-// - If one side is empty, substitutes the corresponding auto bound
-const range_complete = (axis) => {
-    const min_el = range_inputs[axis].min;
-    const max_el = range_inputs[axis].max;
-    if (!min_el || !max_el)
-        return;
-    [min_el, max_el].forEach((el) => el.classList.remove(`invalid`));
-    const parse = (el) => (el.value === `` ? null : Number(el.value));
-    const min_val = parse(min_el);
-    const max_val = parse(max_el);
-    if (min_val !== null && max_val !== null && min_val >= max_val) {
-        min_el.classList.add(`invalid`);
-        max_el.classList.add(`invalid`);
-        return;
-    }
-    const final_range = min_val === null && max_val === null
-        ? undefined
-        : [min_val, max_val];
-    if (axis === `x`)
-        x_range = final_range;
-    else
-        y_range = final_range;
-};
-const input_props = (axis, bound, range) => ({
-    type: `number`,
-    value: range?.[bound === `min` ? 0 : 1] ?? ``,
-    placeholder: `auto`,
-    class: `range-input`,
-    onblur: () => range_complete(axis),
-    onkeydown: (e) => e.key === `Enter` && e.target.blur(),
-});
+<script lang="ts">import { SettingsSection } from '..';
+import { PlotControls } from './';
+let { orientation = $bindable(`vertical`), mode = $bindable(`overlay`), x_axis = $bindable({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable({}), show_controls = $bindable(false), controls_open = $bindable(false), ...rest } = $props();
 </script>
 
-{#if show_controls}
-  {@const toggle_style =
-    `position: absolute; top: var(--ctrl-btn-top, 1ex); right: var(--ctrl-btn-right, 1ex); background-color: transparent;`}
-  <DraggablePane
-    bind:show={controls_open}
-    closed_icon="Settings"
-    open_icon="Cross"
-    toggle_props={{
-      title: `${controls_open ? `Close` : `Open`} bar plot controls`,
-      ...toggle_props,
-      class: `bar-controls-toggle ${toggle_props?.class ?? ``}`,
-      style: `${toggle_style} ${toggle_props?.style ?? ``}`,
-    }}
-    pane_props={{
-      ...pane_props,
-      class: `bar-controls-pane ${pane_props?.class ?? ``}`,
-      style: `--pane-padding: 4px; --pane-gap: 4px; ${pane_props?.style ?? ``}`,
-    }}
+<PlotControls
+  bind:show_controls
+  bind:controls_open
+  bind:x_axis
+  bind:y_axis
+  bind:y2_axis
+  bind:display
+  {...rest}
+>
+  <SettingsSection
+    title="Layout"
+    current_values={{ orientation, mode }}
+    style="display: flex; gap: 2ex"
   >
-    {#if plot_controls}
-      {@render plot_controls()}
-    {:else}
-      <SettingsSection
-        title="Display"
-        current_values={{ x_grid, y_grid }}
-        on_reset={() => {
-          x_grid = DEFAULTS.plot.x_grid
-          y_grid = DEFAULTS.plot.y_grid
-        }}
-      >
-        <label>
-          <input type="checkbox" bind:checked={x_grid as boolean} /> X-axis grid
-        </label>
-        <label>
-          <input type="checkbox" bind:checked={y_grid as boolean} /> Y-axis grid
-        </label>
-      </SettingsSection>
-
-      <SettingsSection
-        title="Layout"
-        current_values={{ orientation, mode }}
-      >
-        <label>Orientation:
-          <select bind:value={orientation} id="orientation-select">
-            <option value="vertical">Vertical</option>
-            <option value="horizontal">Horizontal</option>
-          </select>
-        </label>
-        <label>Mode:
-          <select bind:value={mode} id="mode-select">
-            <option value="overlay">Overlay</option>
-            <option value="stacked">Stacked</option>
-            <option value="grouped">Grouped (Side-by-Side)</option>
-          </select>
-        </label>
-      </SettingsSection>
-
-      <SettingsSection
-        title="Axis Range"
-        current_values={{ x_range, y_range }}
-        on_reset={() => {
-          x_range = undefined
-          y_range = undefined
-        }}
-      >
-        <label>X-axis:
-          <input
-            {...input_props(`x`, `min`, x_range)}
-            bind:this={range_inputs.x.min}
-          />
-          &nbsp;to
-          <input
-            {...input_props(`x`, `max`, x_range)}
-            bind:this={range_inputs.x.max}
-          />
-        </label>
-        <label>Y-axis:
-          <input
-            {...input_props(`y`, `min`, y_range)}
-            bind:this={range_inputs.y.min}
-          />
-          &nbsp;to
-          <input
-            {...input_props(`y`, `max`, y_range)}
-            bind:this={range_inputs.y.max}
-          />
-        </label>
-        <button onclick={set_auto_ranges} style="margin-left: 8px">auto</button>
-      </SettingsSection>
-
-      <SettingsSection
-        title="Ticks"
-        current_values={{ x_ticks, y_ticks }}
-        on_reset={() => {
-          x_ticks = DEFAULTS.plot.x_ticks
-          y_ticks = DEFAULTS.plot.y_ticks
-        }}
-      >
-        <label>X-axis:
-          <input
-            type="number"
-            min="2"
-            max="20"
-            step="1"
-            value={typeof x_ticks === `number` ? x_ticks : 8}
-            oninput={ticks_input_handler(`x`)}
-          />
-        </label>
-        <label>Y-axis:
-          <input
-            type="number"
-            min="2"
-            max="20"
-            step="1"
-            value={typeof y_ticks === `number` ? y_ticks : 6}
-            oninput={ticks_input_handler(`y`)}
-          />
-        </label>
-      </SettingsSection>
-
-      <SettingsSection
-        title="Tick Format"
-        current_values={{ x_format, y_format }}
-        on_reset={() => {
-          x_format = DEFAULTS.plot.x_format
-          y_format = DEFAULTS.plot.y_format
-        }}
-      >
-        <label>X-axis:
-          <input type="text" bind:value={x_format} placeholder=".2~s / .0%" />
-        </label>
-        <label>Y-axis:
-          <input type="text" bind:value={y_format} placeholder="d / .1e" />
-        </label>
-      </SettingsSection>
-    {/if}
-  </DraggablePane>
-{/if}
-
-<style>
-  label {
-    display: inline-flex !important;
-    margin: 0 0 0 5pt;
-  }
-</style>
+    <label style="flex: 1">
+      Orientation:
+      <select bind:value={orientation} id="orientation-select">
+        <option value="vertical">Vertical</option>
+        <option value="horizontal">Horizontal</option>
+      </select>
+    </label>
+    <label style="flex: 1">
+      Mode:
+      <select bind:value={mode} id="mode-select">
+        <option value="overlay">Overlay</option>
+        <option value="stacked">Stacked</option>
+        <option value="grouped">Grouped (Side-by-Side)</option>
+      </select>
+    </label>
+  </SettingsSection>
+</PlotControls>

package/dist/plot/BarPlotControls.svelte.d.ts

@@ -1,26 +1,15 @@
-import { DraggablePane } from '..';
-import type { BarMode, Orientation } from './';
-import type { TicksOption } from './scales';
-import type { ComponentProps, Snippet } from 'svelte';
-interface Props {
-    show_controls?: boolean;
-    controls_open?: boolean;
+import type { AxisConfig, BarMode, DisplayConfig } from './';
+import type { Orientation, PlotControlsProps } from './types';
+type $$ComponentProps = Omit<PlotControlsProps, `children` | `post_children`> & {
     orientation?: Orientation;
     mode?: BarMode;
-    x_grid?: boolean | Record<string, unknown>;
-    y_grid?: boolean | Record<string, unknown>;
-    x_ticks?: TicksOption;
-    y_ticks?: TicksOption;
-    x_format?: string;
-    y_format?: string;
-    x_range?: [number | null, number | null] | undefined;
-    y_range?: [number | null, number | null] | undefined;
-    auto_x_range?: [number, number];
-    auto_y_range?: [number, number];
-    plot_controls?: Snippet<[]> | undefined;
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
-}
-declare const BarPlotControls: import("svelte").Component<Props, {}, "orientation" | "mode" | "show_controls" | "x_grid" | "y_grid" | "x_format" | "y_format" | "x_ticks" | "y_ticks" | "controls_open" | "x_range" | "y_range">;
+    x_axis?: AxisConfig;
+    y_axis?: AxisConfig;
+    y2_axis?: AxisConfig;
+    display?: DisplayConfig;
+    show_controls?: boolean;
+    controls_open?: boolean;
+};
+declare const BarPlotControls: import("svelte").Component<$$ComponentProps, {}, "display" | "orientation" | "mode" | "show_controls" | "y_axis" | "y2_axis" | "x_axis" | "controls_open">;
 type BarPlotControls = ReturnType<typeof BarPlotControls>;
 export default BarPlotControls;

package/dist/plot/ColorBar.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type Orientation } from '..';
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     title?: string;
     color_scale?: ((x: number) => string) | string | null;
     title_side?: `left` | `right` | `top` | `bottom`;
@@ -18,7 +18,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     scale_type?: `linear` | `log`;
     color_scale_fn?: (value: number) => string;
     color_scale_domain?: [number, number];
-}
-declare const ColorBar: import("svelte").Component<Props, {}, "color_scale" | "tick_labels" | "nice_range">;
+};
+declare const ColorBar: import("svelte").Component<$$ComponentProps, {}, "color_scale" | "tick_labels" | "nice_range">;
 type ColorBar = ReturnType<typeof ColorBar>;
 export default ColorBar;

package/dist/plot/ColorScaleSelect.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { ColorBar } from '..';
 import * as d3_sc from 'd3-scale-chromatic';
 import Select from 'svelte-multiselect';
-let { options = Object.keys(d3_sc).filter((key) => key.startsWith(`interpolate`)), value = $bindable(options[0]), selected = $bindable([]), minSelect = 0, placeholder = `Select a color scale`, colorbar = {}, ...rest } = $props();
+let { options = Object.keys(d3_sc).filter((key) => key.startsWith(`interpolate`)), value = $bindable(options[0]), selected = $bindable([]), minSelect = 1, placeholder = `Select a color scale`, colorbar = {}, ...rest } = $props();
 </script>
 
 <Select

package/dist/plot/ColorScaleSelect.svelte.d.ts

@@ -2,14 +2,14 @@ import { ColorBar } from '..';
 import type { ComponentProps } from 'svelte';
 import Select from 'svelte-multiselect';
 import type { D3InterpolateName } from '../colors';
-interface Props extends Omit<ComponentProps<typeof Select>, `options`> {
+type $$ComponentProps = Omit<ComponentProps<typeof Select>, `options`> & {
     options?: D3InterpolateName[];
     value?: D3InterpolateName;
     selected?: D3InterpolateName[];
     minSelect?: number;
     placeholder?: string;
     colorbar?: ComponentProps<typeof ColorBar>;
-}
-declare const ColorScaleSelect: import("svelte").Component<Props, {}, "value" | "selected">;
+};
+declare const ColorScaleSelect: import("svelte").Component<$$ComponentProps, {}, "value" | "selected">;
 type ColorScaleSelect = ReturnType<typeof ColorScaleSelect>;
 export default ColorScaleSelect;

package/dist/plot/ElementScatter.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { element_data, format_num, ScatterPlot } from '..';
 import { selected } from '../state.svelte';
-let { y, x_label = `Atomic Number`, y_label = ``, y_unit = ``, tooltip_point = $bindable(null), hovered = $bindable(false), y_format = `~s`, ...rest } = $props();
+let { y, x_axis = $bindable({ label: `Atomic Number` }), y_axis = $bindable({ label: ``, format: `~s` }), y_unit = ``, tooltip_point = $bindable(null), hovered = $bindable(false), ...rest } = $props();
 // update tooltip on hover element tile
 $effect.pre(() => {
     if (selected.element?.number && !hovered) {
@@ -25,14 +25,14 @@ $effect.pre(() => {
   ]}
   bind:tooltip_point
   bind:hovered
-  {x_label}
-  {y_label}
-  {y_format}
+  {x_axis}
+  {y_axis}
   color_bar={null}
+  padding={{ l: 45, r: 10, t: 0, b: 40 }}
   {...rest}
 >
   {#snippet tooltip({ x, y })}
     <strong>{x} - {element_data[x - 1]?.name}</strong><br />
-    {y_label} = {format_num(y, y_format)}{y_unit ?? ``}
+    {y_axis.label} = {format_num(y, y_axis.format ?? `~s`)}{y_unit ?? ``}
   {/snippet}
 </ScatterPlot>

package/dist/plot/ElementScatter.svelte.d.ts

@@ -1,14 +1,14 @@
-import { type InternalPoint, ScatterPlot } from '..';
+import type { AxisConfig, InternalPoint } from '..';
+import { ScatterPlot } from '..';
 import type { ComponentProps } from 'svelte';
-interface Props extends ComponentProps<typeof ScatterPlot> {
+type $$ComponentProps = ComponentProps<typeof ScatterPlot> & {
     y: number[];
-    x_label?: string;
-    y_label?: string;
-    y_unit?: string;
+    x_axis?: AxisConfig;
+    y_axis?: AxisConfig;
+    y_unit?: string | null;
     tooltip_point?: InternalPoint | null;
     hovered?: boolean;
-    y_format?: string;
-}
-declare const ElementScatter: import("svelte").Component<Props, {}, "hovered" | "tooltip_point">;
+};
+declare const ElementScatter: import("svelte").Component<$$ComponentProps, {}, "y_axis" | "x_axis" | "hovered" | "tooltip_point">;
 type ElementScatter = ReturnType<typeof ElementScatter>;
 export default ElementScatter;