change scale.custom to scale.*.custom

Author: Fan-iX

src/js/scale.js

@@ -17,6 +17,10 @@ export const oob = {
     },
 }
 
+function custom_scale(func, { title, ...etc } = {}) {
+    return Object.assign(function (arr) { return arr.map(func) }, { title }, etc)
+}
+
 function manual_scale({
     values = {},
     na_value = null,
@@ -214,6 +218,7 @@ const palette_scales = {
 
     dynamic: palette_scale_dynamic,
     auto: palette_scale_auto,
+    custom: custom_scale,
 
     default: palette_scale_auto,
 }
@@ -258,30 +263,32 @@ export default {
     fill: palette_scales,
     alpha: {
         continuous: continuous_scale,
+        custom: custom_scale,
         default: ({ title, ...etc } = {}) => continuous_scale({ range: [0.1, 1], title, ...etc }),
     },
     size: {
         identity: scale_identity_number,
         continuous: continuous_scale,
+        custom: custom_scale,
         default: ({ title, ...etc } = {}) => continuous_scale({ range: [1, 6], title, ...etc }),
     },
     linewidth: {
         identity: scale_identity_number,
         continuous: continuous_scale,
         manual: manual_scale,
+        custom: custom_scale,
         default: ({ title, ...etc } = {}) => continuous_scale({ range: [1, 6], title, ...etc }),
     },
     linetype: {
         identity: scale_identity_string,
         discrete: linetype_scale_discrete,
         default: linetype_scale_discrete,
+        custom: custom_scale,
     },
     shape: {
         identity: scale_identity_string,
         discrete: shape_scale_discrete,
         default: shape_scale_discrete,
-    },
-    custom(func, { title, ...etc } = {}) {
-        return Object.assign(function (arr) { return arr.map(func) }, { title }, etc)
+        custom: custom_scale,
     },
 }

web-docs/docs/gallery.vue

@@ -65,7 +65,7 @@ const vBind = {
             <hr>
             <pre><code class="html">{{templates[4] = `<VVPlot :data="letters" legend-teleport="#legend-4">
     <VVAxisY :min="0" :expand-mult="0" />
-    <VVGeomBar :x="d => d" :fill="d => d" :scales="{ fill: vvscale.custom((v) => ['blue', 'gold'][v % 2]) }" />
+    <VVGeomBar :x="d => d" :fill="d => d" :scales="{ fill: vvscale.fill.custom((v) => ['blue', 'gold'][v % 2]) }" />
 </VVPlot>`}}</code></pre>
             <div class="flex flex-row">
                 <component :is="{ template: templates[4], props: Object.keys(vBind) }" v-bind="vBind" />

web-docs/docs/scale.vue

@@ -358,11 +358,11 @@ const size_limits_max = ref(600)
                 that is not covered by the built-in scale functions.
             </p>
             <p>
-                The <code>vvscale.custom</code> wrapper function can be used to create custom scale functions easily.
+                The <code>vvscale.*.custom</code> wrapper function can be used to create custom scale functions easily.
             </p>
             <div class="grid grid-cols-[3fr_2fr] gap-4">
                 <pre><code class="html">{{templates[9] = `<VVPlot :data="letters" :scales="{
-    fill: vvscale.custom(v => ['blue', 'gold'][v % 2]),
+    fill: vvscale.fill.custom(v => ['blue', 'gold'][v % 2]),
  // same as \`arr => arr.map(v => ['blue','gold'][v % 2])\`
  // the function will be applied to an array of categorical values,
  // \`v % 2\` works because \`v.valueOf()\` will return its ordinal number

web-docs/playground.vue

@@ -73,7 +73,7 @@ const templates = {
 <VVGeomSegment :x="d => d.x1" :y="d => d.y1" :xend="d => d.x2" :yend="d => d.y2"
     :data="[{ x1: 2.62, x2: 3.57, y1: 21, y2: 15 }]" color="red" linetype="dashed" />`,
     letters: `<VVAxisY :min="0" :expand-mult="0" />
-<VVGeomBar :x="d => d" :fill="d => d" :scales="{ fill: vvscale.custom((v) => ['blue', 'gold'][v % 2]) }" />
+<VVGeomBar :x="d => d" :fill="d => d" :scales="{ fill: vvscale.fill.custom((v) => ['blue', 'gold'][v % 2]) }" />
 <VVAction zoom move />`,
     pigments: `<VVGeomLine :x="d => d.wave_length" :y="d => d.molar_extinction" :color="d => d.pigment" :group="d => d.pigment"
     :scales="{ color: vvscale.color.manual({ values: { beta_carotene: 'orangered', chlorophyll_a: 'limegreen', chlorophyll_b: 'royalblue' } }) }" />