fix sort typing, fix default sorting

svelteplot · gka · May 31, 2025 · May 29, 2025 · May 29, 2025 · May 29, 2025
commit e9a30f6d645228c22c39b77cbec14853bf54b444
diff --git a/src/lib/helpers/scales.ts b/src/lib/helpers/scales.ts
@@ -30,6 +30,7 @@ import isDataRecord from './isDataRecord.js';
 
 import { createProjection } from './projection.js';
 import { maybeInterval } from './autoTicks.js';
+import { IS_SORTED } from 'svelteplot/transforms/sort.js';
 
 /**
  * compute the plot scales
@@ -183,7 +184,8 @@ export function createScale<T extends ScaleOptions>(
         // we're deliberately checking for !== undefined and not for != null
         // since the explicit sort transforms like shuffle will set the
         // sort channel to null to we know that there's an explicit order
-        if (name === 'x' && mark.options.sort != null) {
+        if (name === 'y') console.log(mark.type, mark.options[IS_SORTED]);
+        if (mark.options[IS_SORTED] != null) {
             sortOrdinalDomain = false;
         }
         for (const channel of mark.channels) {

diff --git a/src/lib/transforms/sort.ts b/src/lib/transforms/sort.ts
@@ -5,6 +5,7 @@ import { shuffler } from 'd3-array';
 import { randomLcg } from 'd3-random';
 
 export const SORT_KEY = Symbol('sortKey');
+export const IS_SORTED = Symbol('isSorted');
 
 export function sort(
     { data, ...channels }: TransformArg<DataRecord>,
@@ -38,6 +39,7 @@ export function sort(
                 .map(({ [SORT_KEY]: a, ...rest }) => rest),
 
             ...channels,
+            [IS_SORTED]: sort,
             // set the sort channel to null to disable the implicit alphabetical
             // ordering of ordinal domains, and also to avoid double sorting in case
             // this transform is used "outside" a mark

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -445,7 +445,7 @@ export type PlotDefaults = {
     css: (d: string) => string | undefined;
 };
 
-export type GenericMarkOptions = Record<string, any>;
+export type GenericMarkOptions = Record<string | symbol, any>;
 
 export type DataRecord = Record<string | symbol, RawValue> & {
     ___orig___?: RawValue | [RawValue, RawValue];
@@ -657,6 +657,15 @@ export type BaseMarkProps = Partial<{
     dy: ConstantAccessor<number>;
     fill: ConstantAccessor<string>;
     fillOpacity: ConstantAccessor<number>;
+    sort:
+        | string
+        | ConstantAccessor<RawValue>
+        | {
+              /** sort data using an already defined channel */
+              channel: string;
+              /** sort order */
+              order?: 'ascending' | 'descending';
+          };
     stroke: ConstantAccessor<string>;
     strokeWidth: ConstantAccessor<number>;
     strokeOpacity: ConstantAccessor<number>;

diff --git a/src/routes/examples/+layout.ts b/src/routes/examples/+layout.ts
@@ -1,9 +1,9 @@
 import { loadDatasets, loadJSON } from '$lib/helpers/data.js';
-import type { PageLoad } from './$types.js';
+import type { PageServerLoad } from '../$types';
 
 export const ssr = true;
 
-export const load: PageLoad = async ({ fetch }) => {
+export const load: PageServerLoad = async ({ fetch }) => {
     return {
         data: {
             world: await loadJSON(fetch, 'countries-110m'),
@@ -16,6 +16,7 @@ export const load: PageLoad = async ({ fetch }) => {
                     'co2',
                     'crimea',
                     'driving',
+                    'languages',
                     'penguins',
                     'riaa',
                     'stateage',

diff --git a/src/routes/examples/dot/3-dot-plot.svelte b/src/routes/examples/dot/3-dot-plot.svelte
@@ -0,0 +1,28 @@
+<script module>
+    export const title = 'Dot plot';
+</script>
+
+<script>
+    import { Plot, Dot, GridY } from 'svelteplot';
+    import { page } from '$app/state';
+    let { languages } = $derived(page.data.data);
+</script>
+
+<Plot
+    frame
+    inset={20}
+    x={{
+        type: 'log',
+        axis: 'both',
+        label: 'NUMBER OF SPEAKERS',
+        labelAnchor: 'center'
+    }}
+    y={{ type: 'point', label: '' }}>
+    <GridY strokeDasharray="1,3" strokeOpacity={0.5} />
+    <Dot
+        data={languages.filter((d) => d['Total speakers'] >= 70e6)}
+        fill="currentColor"
+        sort={{ channel: '-x' }}
+        y="Language"
+        x="Total speakers" />
+</Plot>