@milaboratories/graph-maker 1.1.167 → 1.1.169

package/dist/GraphMaker/forms/LayersForm/Layer/Bubble.vue.js

@@ -1,121 +1,149 @@
-import { defineComponent as k, computed as u, ref as v, createElementBlock as T, openBlock as b, Fragment as O, createVNode as a, createBlock as E, createCommentVNode as P, createElementVNode as d, unref as s, withCtx as B } from "vue";
-import { useStore as I } from "../../../store.js";
-import { DEFAULT_CONTINUOUS_PALETTE as L, DEFAULT_BLACK as U, PALETTE_MAP as y } from "../../../constantsAesthetic.js";
-import { createContinuousMappingFromPalette as x } from "../../../dataBindAes.js";
-import z from "../../../components/MultiselectButton.vue.js";
-import M from "../../../components/AesSettings/PalettesForm.vue.js";
-import D from "../../../components/AesSettings/FormWrapper.vue.js";
-import { PlBtnGroup as f, PlNumberField as F } from "@platforma-sdk/ui-vue";
-import $ from "../AesSelector.vue.js";
-const w = { class: "input-item" }, R = { class: "button-group-item" }, G = { class: "button-group-item" }, Z = {
+import { defineComponent as B, computed as s, ref as v, createElementBlock as O, openBlock as A, Fragment as x, createVNode as a, createBlock as y, createCommentVNode as E, createElementVNode as u, unref as n, withCtx as U } from "vue";
+import { useStore as P } from "../../../store.js";
+import { DEFAULT_CONTINUOUS_PALETTE as _, DEFAULT_BLACK as I, PALETTE_MAP as L } from "../../../constantsAesthetic.js";
+import { createContinuousMappingFromPalette as z } from "../../../dataBindAes.js";
+import D from "../../../components/MultiselectButton.vue.js";
+import F from "../../../components/AesSettings/PalettesForm.vue.js";
+import $ from "../../../components/AesSettings/FormWrapper.vue.js";
+import { PlBtnGroup as p, PlCheckbox as V, PlNumberField as G } from "@platforma-sdk/ui-vue";
+import R from "../AesSelector.vue.js";
+const w = { class: "input-item" }, X = { class: "button-group-item" }, Y = { class: "button-group-item" }, H = { class: "checkbox-item" }, Z = { class: "checkbox-item" }, K = { class: "button-group-item" }, j = {
   class: "button-group-item",
   style: { display: "flex", alignItems: "end" }
-}, ee = /* @__PURE__ */ k({
+}, ue = /* @__PURE__ */ B({
   __name: "Bubble",
-  setup(H) {
-    const n = I(), t = u(() => n.value.reactive.layersSettings.bubble), N = u(() => n.value.reactive.optionsState);
-    u(() => n.value.inputGuide.value);
-    const i = u(() => {
+  setup(q) {
+    const i = P(), t = s(() => i.value.reactive.layersSettings.bubble), f = s(() => i.value.reactive.optionsState);
+    s(() => i.value.inputGuide.value);
+    const r = s(() => {
       var o;
-      return (o = N.value.components.valueColor.selectorStates[0]) == null ? void 0 : o.selectedSource;
-    }), V = u(() => {
+      return (o = f.value.components.valueColor.selectorStates[0]) == null ? void 0 : o.selectedSource;
+    }), N = s(() => {
       var o;
-      return i.value ? (o = n.value.reactive.dataBindAes[i.value]) == null ? void 0 : o.palette : void 0;
-    }), r = v(!1), m = v(V.value ?? L);
+      return r.value ? (o = i.value.reactive.dataBindAes[r.value]) == null ? void 0 : o.palette : void 0;
+    }), m = v(!1), d = v(N.value ?? _);
     function C(o) {
-      m.value = o, r.value = !1, i.value && (n.value.reactive.dataBindAes[i.value] = x(o));
+      d.value = o, m.value = !1, r.value && (i.value.reactive.dataBindAes[r.value] = z(o));
     }
-    const g = [
+    const k = [
       { label: "None", value: null },
       { label: "Columns", value: "column" },
       { label: "Rows", value: "row" }
-    ], S = [
+    ], M = [
       { label: "z-score", value: "standardScaling" },
       { label: "Min-max", value: "meanNormalization" }
-    ], A = u({
-      get: () => t.value.strokeColor ?? U,
+    ], S = [
+      { label: "Mean", value: "mean" },
+      { label: "Min", value: "min" },
+      { label: "Max", value: "max" },
+      { label: "Median", value: "median" }
+    ], b = s({
+      get: () => t.value.strokeColor ?? I,
       set: (o) => {
         t.value.strokeColor = o;
       }
-    }), _ = [
+    }), T = [
       { label: "empty", value: null },
       { label: "Special value", value: "custom" }
-    ], p = v(t.value.NAValueAs !== null ? "custom" : t.value.NAValueAs), c = v(t.value.NAValueAs ?? 0);
-    return (o, e) => (b(), T(O, null, [
-      a(z, {
+    ], g = v(t.value.NAValueAs !== null ? "custom" : t.value.NAValueAs), c = v(t.value.NAValueAs ?? 0);
+    return (o, e) => (A(), O(x, null, [
+      a(D, {
         label: "Color Palette ",
-        title: s(y)[m.value].title,
-        palette: m.value,
+        title: n(L)[d.value].title,
+        palette: d.value,
         onButtonClick: e[0] || (e[0] = (l) => {
-          r.value = !0;
+          m.value = !0;
         })
       }, null, 8, ["title", "palette"]),
-      r.value ? (b(), E(D, {
+      m.value ? (A(), y($, {
         key: 0,
         title: "Color Palette",
         "back-title": "Color mapping",
-        "onForm:close": e[1] || (e[1] = (l) => r.value = !1)
+        "onForm:close": e[1] || (e[1] = (l) => m.value = !1)
       }, {
-        default: B(() => [
-          a(M, {
-            selected: m.value,
+        default: U(() => [
+          a(F, {
+            selected: d.value,
             categorical: !1,
             onSelect: C
           }, null, 8, ["selected"])
         ]),
         _: 1
-      })) : P("", !0),
-      d("div", w, [
-        a($, {
+      })) : E("", !0),
+      u("div", w, [
+        a(R, {
           label: "Stroke color",
           "form-title": "Stroke Color Settings",
           "form-back-title": "Layers",
           type: "stroke",
           "possible-aes-source-inputs": [],
-          selected: A.value,
-          onAesUpdate: e[2] || (e[2] = (l) => A.value = l)
+          selected: b.value,
+          onAesUpdate: e[2] || (e[2] = (l) => b.value = l)
         }, null, 8, ["selected"])
       ]),
-      d("div", R, [
-        a(s(f), {
+      u("div", X, [
+        a(n(p), {
           label: "Normalize by",
-          options: g,
+          options: k,
           compact: !0,
           modelValue: t.value.normalizationDirection,
           "onUpdate:modelValue": e[3] || (e[3] = (l) => t.value.normalizationDirection = l)
         }, null, 8, ["modelValue"])
       ]),
-      d("div", G, [
-        a(s(f), {
+      u("div", Y, [
+        a(n(p), {
           label: "Normalization method",
-          options: S,
+          options: M,
           compact: !0,
           modelValue: t.value.normalizationMethod,
           "onUpdate:modelValue": e[4] || (e[4] = (l) => t.value.normalizationMethod = l)
         }, null, 8, ["modelValue"])
       ]),
-      d("div", Z, [
-        a(s(f), {
+      u("div", H, [
+        a(n(V), {
+          modelValue: t.value.aggregateByX,
+          "onUpdate:modelValue": e[5] || (e[5] = (l) => t.value.aggregateByX = l)
+        }, null, 8, ["modelValue"]),
+        e[12] || (e[12] = u("span", null, "Aggregate X groups", -1))
+      ]),
+      u("div", Z, [
+        a(n(V), {
+          modelValue: t.value.aggregateByY,
+          "onUpdate:modelValue": e[6] || (e[6] = (l) => t.value.aggregateByY = l)
+        }, null, 8, ["modelValue"]),
+        e[13] || (e[13] = u("span", null, "Aggregate Y groups", -1))
+      ]),
+      u("div", K, [
+        a(n(p), {
+          label: "Aggregation method",
+          options: S,
+          compact: !0,
+          modelValue: t.value.aggregationMethod,
+          "onUpdate:modelValue": e[7] || (e[7] = (l) => t.value.aggregationMethod = l)
+        }, null, 8, ["modelValue"])
+      ]),
+      u("div", j, [
+        a(n(p), {
           label: "Treat NA value as:",
-          options: _,
+          options: T,
           compact: !0,
-          modelValue: p.value,
+          modelValue: g.value,
           "onUpdate:modelValue": [
-            e[5] || (e[5] = (l) => p.value = l),
-            e[6] || (e[6] = (l) => {
+            e[8] || (e[8] = (l) => g.value = l),
+            e[9] || (e[9] = (l) => {
               l === "custom" ? t.value.NAValueAs = c.value : t.value.NAValueAs = l;
             })
           ]
         }, null, 8, ["modelValue"]),
-        a(s(F), {
+        a(n(G), {
           style: { height: "33px", marginLeft: "16px", width: "75px" },
-          disabled: p.value !== "custom",
+          disabled: g.value !== "custom",
           label: "NA value",
           useIncrementButtons: !1,
           modelValue: c.value,
           "onUpdate:modelValue": [
-            e[7] || (e[7] = (l) => c.value = l),
-            e[8] || (e[8] = (l) => {
+            e[10] || (e[10] = (l) => c.value = l),
+            e[11] || (e[11] = (l) => {
               l !== void 0 && (t.value.NAValueAs = l);
             })
           ]
@@ -125,6 +153,6 @@ const w = { class: "input-item" }, R = { class: "button-group-item" }, G = { cla
   }
 });
 export {
-  ee as default
+  ue as default
 };
 //# sourceMappingURL=Bubble.vue.js.map

package/dist/GraphMaker/forms/LayersForm/Layer/Bubble.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bubble.vue.js","sources":["../../../../../src/GraphMaker/forms/LayersForm/Layer/Bubble.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../store';\nimport { BubbleLayer } from '../../../types';\nimport { computed, ref } from 'vue';\nimport {\n  DEFAULT_BLACK,\n  DEFAULT_CONTINUOUS_PALETTE,\n  PALETTE_MAP\n} from '../../../constantsAesthetic';\nimport { ContinuousPalette } from '../../../components/AesSettings/types';\nimport { createContinuousMappingFromPalette } from '../../../dataBindAes';\nimport MultiselectButton from '../../../components/MultiselectButton.vue';\nimport PalettesForm from '../../../components/AesSettings/PalettesForm.vue';\nimport FormWrapper from '../../../components/AesSettings/FormWrapper.vue';\nimport { BubbleUIState, InputGuide } from '@milaboratories/pf-plots';\nimport { PlBtnGroup, PlNumberField, SimpleOption } from '@platforma-sdk/ui-vue';\nimport AesSelector from '../AesSelector.vue';\n\nconst store = useStore();\nconst layer: BubbleLayer = 'bubble';\nconst settings = computed(() => store.value.reactive.layersSettings.bubble);\nconst optionsState = computed(() => store.value.reactive.optionsState as BubbleUIState);\nconst inputGuide = computed(() => store.value.inputGuide.value as InputGuide<BubbleUIState>);\n\nconst valueColor = computed(() => optionsState.value.components.valueColor.selectorStates[0]?.selectedSource);\nconst savedDataValuePalette = computed(() => valueColor.value ? store.value.reactive.dataBindAes[valueColor.value]?.palette : undefined);\n\nconst palettesOpen = ref(false);\nconst palette = ref<ContinuousPalette>(savedDataValuePalette.value as ContinuousPalette ?? DEFAULT_CONTINUOUS_PALETTE);\n\nfunction onPaletteSelect(value: ContinuousPalette) {\n  palette.value = value;\n  palettesOpen.value = false;\n  if (valueColor.value) {\n    store.value.reactive.dataBindAes[valueColor.value] = createContinuousMappingFromPalette(value);\n  }\n}\n\nconst NORMALIZATION_DIRECTION:SimpleOption[] = [\n  {label: 'None', value: null},\n  {label: 'Columns', value: 'column'},\n  {label: 'Rows', value: 'row'},\n];\nconst NORMALIZATION_METHOD:SimpleOption[] = [\n  {label: 'z-score', value: 'standardScaling'},\n  {label: 'Min-max', value: 'meanNormalization'},\n]\n\nconst stroke = computed({\n  get: () => {\n    return settings.value.strokeColor ?? DEFAULT_BLACK\n  },\n  set: (v:string) => {\n    settings.value.strokeColor = v;\n  }\n});\n\nconst NA_VALUE_OPTIONS: SimpleOption[] = [\n  { label: 'empty', value: null },\n  { label: 'Special value', value: 'custom' }\n];\n\nconst NAValueOption = ref(settings.value.NAValueAs !== null ? 'custom' : settings.value.NAValueAs);\nconst customNA = ref(settings.value.NAValueAs ?? 0);\n\n</script>\n\n<template>\n  <multiselect-button\n    label=\"Color Palette \"\n    :title=\"PALETTE_MAP[palette].title\"\n    :palette=\"palette\"\n    @button-click=\"palettesOpen = true;\"\n  />\n  <form-wrapper\n    v-if=\"palettesOpen\"\n    title=\"Color Palette\"\n    back-title=\"Color mapping\"\n    @form:close=\"palettesOpen = false\"\n  >\n    <palettes-form :selected=\"palette\" :categorical=\"false\" @select=\"onPaletteSelect\" />\n  </form-wrapper>\n  <div class=\"input-item\">\n    <aes-selector\n      label=\"Stroke color\"\n      form-title=\"Stroke Color Settings\"\n      form-back-title=\"Layers\"\n      type=\"stroke\"\n      :possible-aes-source-inputs=\"[]\"\n      :selected=\"stroke\"\n      @aes-update=\"(v:string) => stroke = v\"\n    />\n  </div>\n  <div class=\"button-group-item\">\n    <pl-btn-group\n      label=\"Normalize by\"\n      :options=\"NORMALIZATION_DIRECTION\"\n      :compact=\"true\"\n      v-model=\"settings.normalizationDirection\"\n    />\n  </div>\n  <div class=\"button-group-item\">\n    <pl-btn-group\n      label=\"Normalization method\"\n      :options=\"NORMALIZATION_METHOD\"\n      :compact=\"true\"\n      v-model=\"settings.normalizationMethod\"\n    />\n  </div>\n  <div class=\"button-group-item\" :style=\"{display: 'flex', alignItems: 'end'}\">\n    <pl-btn-group\n      label=\"Treat NA value as:\"\n      :options=\"NA_VALUE_OPTIONS\"\n      :compact=\"true\"\n      v-model=\"NAValueOption\"\n      @update:modelValue=\"(value:unknown) => {\n                if (value === 'custom') {\n          settings.NAValueAs = customNA;\n        } else {\n          settings.NAValueAs = value as number|null;\n        }\n          }\"\n    />\n    <pl-number-field\n      :style=\"{height: '33px', marginLeft: '16px', width: '75px'}\"\n      :disabled=\"NAValueOption !== 'custom'\"\n      label=\"NA value\"\n      :useIncrementButtons=\"false\"\n      v-model=\"customNA\"\n      @update:modelValue=\"(value:unknown) => {\n        if (value !== undefined) {\n          settings.NAValueAs = value as number;\n        }\n      }\"\n    />\n  </div>\n</template>\n"],"names":["store","useStore","settings","computed","optionsState","valueColor","_a","savedDataValuePalette","palettesOpen","ref","palette","DEFAULT_CONTINUOUS_PALETTE","onPaletteSelect","value","createContinuousMappingFromPalette","NORMALIZATION_DIRECTION","NORMALIZATION_METHOD","stroke","DEFAULT_BLACK","v","NA_VALUE_OPTIONS","NAValueOption","customNA"],"mappings":";;;;;;;;;;;;;;;AAkBA,UAAMA,IAAQC,EAAA,GAERC,IAAWC,EAAS,MAAMH,EAAM,MAAM,SAAS,eAAe,MAAM,GACpEI,IAAeD,EAAS,MAAMH,EAAM,MAAM,SAAS,YAA6B;AACnE,IAAAG,EAAS,MAAMH,EAAM,MAAM,WAAW,KAAkC;AAE3F,UAAMK,IAAaF,EAAS,MAAA;;AAAM,cAAAG,IAAAF,EAAa,MAAM,WAAW,WAAW,eAAe,CAAC,MAAzD,gBAAAE,EAA4D;AAAA,KAAc,GACtGC,IAAwBJ,EAAS,MAAA;;AAAM,aAAAE,EAAW,SAAQC,IAAAN,EAAM,MAAM,SAAS,YAAYK,EAAW,KAAK,MAAjD,gBAAAC,EAAoD,UAAU;AAAA,KAAS,GAEjIE,IAAeC,EAAI,EAAK,GACxBC,IAAUD,EAAuBF,EAAsB,SAA8BI,CAA0B;AAErH,aAASC,EAAgBC,GAA0B;AACjD,MAAAH,EAAQ,QAAQG,GAChBL,EAAa,QAAQ,IACjBH,EAAW,UACbL,EAAM,MAAM,SAAS,YAAYK,EAAW,KAAK,IAAIS,EAAmCD,CAAK;AAAA,IAEjG;AAEA,UAAME,IAAyC;AAAA,MAC7C,EAAC,OAAO,QAAQ,OAAO,KAAA;AAAA,MACvB,EAAC,OAAO,WAAW,OAAO,SAAA;AAAA,MAC1B,EAAC,OAAO,QAAQ,OAAO,MAAA;AAAA,IAAK,GAExBC,IAAsC;AAAA,MAC1C,EAAC,OAAO,WAAW,OAAO,kBAAA;AAAA,MAC1B,EAAC,OAAO,WAAW,OAAO,oBAAA;AAAA,IAAmB,GAGzCC,IAASd,EAAS;AAAA,MACtB,KAAK,MACID,EAAS,MAAM,eAAegB;AAAA,MAEvC,KAAK,CAACC,MAAa;AACjB,QAAAjB,EAAS,MAAM,cAAciB;AAAA,MAC/B;AAAA,IAAA,CACD,GAEKC,IAAmC;AAAA,MACvC,EAAE,OAAO,SAAS,OAAO,KAAA;AAAA,MACzB,EAAE,OAAO,iBAAiB,OAAO,SAAA;AAAA,IAAS,GAGtCC,IAAgBZ,EAAIP,EAAS,MAAM,cAAc,OAAO,WAAWA,EAAS,MAAM,SAAS,GAC3FoB,IAAWb,EAAIP,EAAS,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Bubble.vue.js","sources":["../../../../../src/GraphMaker/forms/LayersForm/Layer/Bubble.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../store';\nimport { BubbleLayer } from '../../../types';\nimport { computed, ref } from 'vue';\nimport {\n  DEFAULT_BLACK,\n  DEFAULT_CONTINUOUS_PALETTE,\n  PALETTE_MAP\n} from '../../../constantsAesthetic';\nimport { ContinuousPalette } from '../../../components/AesSettings/types';\nimport { createContinuousMappingFromPalette } from '../../../dataBindAes';\nimport MultiselectButton from '../../../components/MultiselectButton.vue';\nimport PalettesForm from '../../../components/AesSettings/PalettesForm.vue';\nimport FormWrapper from '../../../components/AesSettings/FormWrapper.vue';\nimport { BubbleUIState, InputGuide } from '@milaboratories/pf-plots';\nimport { PlBtnGroup, PlCheckbox, PlNumberField, SimpleOption } from '@platforma-sdk/ui-vue';\nimport AesSelector from '../AesSelector.vue';\n\nconst store = useStore();\nconst layer: BubbleLayer = 'bubble';\nconst settings = computed(() => store.value.reactive.layersSettings.bubble);\nconst optionsState = computed(() => store.value.reactive.optionsState as BubbleUIState);\nconst inputGuide = computed(() => store.value.inputGuide.value as InputGuide<BubbleUIState>);\n\nconst valueColor = computed(() => optionsState.value.components.valueColor.selectorStates[0]?.selectedSource);\nconst savedDataValuePalette = computed(() => valueColor.value ? store.value.reactive.dataBindAes[valueColor.value]?.palette : undefined);\n\nconst palettesOpen = ref(false);\nconst palette = ref<ContinuousPalette>(savedDataValuePalette.value as ContinuousPalette ?? DEFAULT_CONTINUOUS_PALETTE);\n\nfunction onPaletteSelect(value: ContinuousPalette) {\n  palette.value = value;\n  palettesOpen.value = false;\n  if (valueColor.value) {\n    store.value.reactive.dataBindAes[valueColor.value] = createContinuousMappingFromPalette(value);\n  }\n}\n\nconst NORMALIZATION_DIRECTION:SimpleOption[] = [\n  {label: 'None', value: null},\n  {label: 'Columns', value: 'column'},\n  {label: 'Rows', value: 'row'},\n];\nconst NORMALIZATION_METHOD:SimpleOption[] = [\n  {label: 'z-score', value: 'standardScaling'},\n  {label: 'Min-max', value: 'meanNormalization'},\n];\nconst AGGREGATION_METHOD: SimpleOption[] = [\n  {label: 'Mean', value: 'mean'},\n  {label: 'Min', value: 'min'},\n  {label: 'Max', value: 'max'},\n  {label: 'Median', value: 'median'},\n];\n\nconst stroke = computed({\n  get: () => {\n    return settings.value.strokeColor ?? DEFAULT_BLACK\n  },\n  set: (v:string) => {\n    settings.value.strokeColor = v;\n  }\n});\n\nconst NA_VALUE_OPTIONS: SimpleOption[] = [\n  { label: 'empty', value: null },\n  { label: 'Special value', value: 'custom' }\n];\n\nconst NAValueOption = ref(settings.value.NAValueAs !== null ? 'custom' : settings.value.NAValueAs);\nconst customNA = ref(settings.value.NAValueAs ?? 0);\n\n</script>\n\n<template>\n  <multiselect-button\n    label=\"Color Palette \"\n    :title=\"PALETTE_MAP[palette].title\"\n    :palette=\"palette\"\n    @button-click=\"palettesOpen = true;\"\n  />\n  <form-wrapper\n    v-if=\"palettesOpen\"\n    title=\"Color Palette\"\n    back-title=\"Color mapping\"\n    @form:close=\"palettesOpen = false\"\n  >\n    <palettes-form :selected=\"palette\" :categorical=\"false\" @select=\"onPaletteSelect\" />\n  </form-wrapper>\n  <div class=\"input-item\">\n    <aes-selector\n      label=\"Stroke color\"\n      form-title=\"Stroke Color Settings\"\n      form-back-title=\"Layers\"\n      type=\"stroke\"\n      :possible-aes-source-inputs=\"[]\"\n      :selected=\"stroke\"\n      @aes-update=\"(v:string) => stroke = v\"\n    />\n  </div>\n  <div class=\"button-group-item\">\n    <pl-btn-group\n      label=\"Normalize by\"\n      :options=\"NORMALIZATION_DIRECTION\"\n      :compact=\"true\"\n      v-model=\"settings.normalizationDirection\"\n    />\n  </div>\n  <div class=\"button-group-item\">\n    <pl-btn-group\n      label=\"Normalization method\"\n      :options=\"NORMALIZATION_METHOD\"\n      :compact=\"true\"\n      v-model=\"settings.normalizationMethod\"\n    />\n  </div>\n  <div class=\"checkbox-item\">\n    <pl-checkbox v-model=\"settings.aggregateByX\"/>\n    <span>Aggregate X groups</span>\n  </div>\n  <div class=\"checkbox-item\">\n    <pl-checkbox v-model=\"settings.aggregateByY\"/>\n    <span>Aggregate Y groups</span>\n  </div>\n  <div class=\"button-group-item\">\n    <pl-btn-group\n      label=\"Aggregation method\"\n      :options=\"AGGREGATION_METHOD\"\n      :compact=\"true\"\n      v-model=\"settings.aggregationMethod\"\n    />\n  </div>\n  <div class=\"button-group-item\" :style=\"{display: 'flex', alignItems: 'end'}\">\n    <pl-btn-group\n      label=\"Treat NA value as:\"\n      :options=\"NA_VALUE_OPTIONS\"\n      :compact=\"true\"\n      v-model=\"NAValueOption\"\n      @update:modelValue=\"(value:unknown) => {\n                if (value === 'custom') {\n          settings.NAValueAs = customNA;\n        } else {\n          settings.NAValueAs = value as number|null;\n        }\n          }\"\n    />\n    <pl-number-field\n      :style=\"{height: '33px', marginLeft: '16px', width: '75px'}\"\n      :disabled=\"NAValueOption !== 'custom'\"\n      label=\"NA value\"\n      :useIncrementButtons=\"false\"\n      v-model=\"customNA\"\n      @update:modelValue=\"(value:unknown) => {\n        if (value !== undefined) {\n          settings.NAValueAs = value as number;\n        }\n      }\"\n    />\n  </div>\n</template>\n"],"names":["store","useStore","settings","computed","optionsState","valueColor","_a","savedDataValuePalette","palettesOpen","ref","palette","DEFAULT_CONTINUOUS_PALETTE","onPaletteSelect","value","createContinuousMappingFromPalette","NORMALIZATION_DIRECTION","NORMALIZATION_METHOD","AGGREGATION_METHOD","stroke","DEFAULT_BLACK","v","NA_VALUE_OPTIONS","NAValueOption","customNA"],"mappings":";;;;;;;;;;;;;;;AAkBA,UAAMA,IAAQC,EAAA,GAERC,IAAWC,EAAS,MAAMH,EAAM,MAAM,SAAS,eAAe,MAAM,GACpEI,IAAeD,EAAS,MAAMH,EAAM,MAAM,SAAS,YAA6B;AACnE,IAAAG,EAAS,MAAMH,EAAM,MAAM,WAAW,KAAkC;AAE3F,UAAMK,IAAaF,EAAS,MAAA;;AAAM,cAAAG,IAAAF,EAAa,MAAM,WAAW,WAAW,eAAe,CAAC,MAAzD,gBAAAE,EAA4D;AAAA,KAAc,GACtGC,IAAwBJ,EAAS,MAAA;;AAAM,aAAAE,EAAW,SAAQC,IAAAN,EAAM,MAAM,SAAS,YAAYK,EAAW,KAAK,MAAjD,gBAAAC,EAAoD,UAAU;AAAA,KAAS,GAEjIE,IAAeC,EAAI,EAAK,GACxBC,IAAUD,EAAuBF,EAAsB,SAA8BI,CAA0B;AAErH,aAASC,EAAgBC,GAA0B;AACjD,MAAAH,EAAQ,QAAQG,GAChBL,EAAa,QAAQ,IACjBH,EAAW,UACbL,EAAM,MAAM,SAAS,YAAYK,EAAW,KAAK,IAAIS,EAAmCD,CAAK;AAAA,IAEjG;AAEA,UAAME,IAAyC;AAAA,MAC7C,EAAC,OAAO,QAAQ,OAAO,KAAA;AAAA,MACvB,EAAC,OAAO,WAAW,OAAO,SAAA;AAAA,MAC1B,EAAC,OAAO,QAAQ,OAAO,MAAA;AAAA,IAAK,GAExBC,IAAsC;AAAA,MAC1C,EAAC,OAAO,WAAW,OAAO,kBAAA;AAAA,MAC1B,EAAC,OAAO,WAAW,OAAO,oBAAA;AAAA,IAAmB,GAEzCC,IAAqC;AAAA,MACzC,EAAC,OAAO,QAAQ,OAAO,OAAA;AAAA,MACvB,EAAC,OAAO,OAAO,OAAO,MAAA;AAAA,MACtB,EAAC,OAAO,OAAO,OAAO,MAAA;AAAA,MACtB,EAAC,OAAO,UAAU,OAAO,SAAA;AAAA,IAAQ,GAG7BC,IAASf,EAAS;AAAA,MACtB,KAAK,MACID,EAAS,MAAM,eAAeiB;AAAA,MAEvC,KAAK,CAACC,MAAa;AACjB,QAAAlB,EAAS,MAAM,cAAckB;AAAA,MAC/B;AAAA,IAAA,CACD,GAEKC,IAAmC;AAAA,MACvC,EAAE,OAAO,SAAS,OAAO,KAAA;AAAA,MACzB,EAAE,OAAO,iBAAiB,OAAO,SAAA;AAAA,IAAS,GAGtCC,IAAgBb,EAAIP,EAAS,MAAM,cAAc,OAAO,WAAWA,EAAS,MAAM,SAAS,GAC3FqB,IAAWd,EAAIP,EAAS,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/GraphMaker/forms/LayersForm/Layer/discrete/StackedArea.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackedArea.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/discrete/StackedArea.vue"],"names":[],"mappings":";AAoUA,wBAKG"}
+{"version":3,"file":"StackedArea.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/discrete/StackedArea.vue"],"names":[],"mappings":";AA8WA,wBAKG"}

package/dist/GraphMaker/forms/LayersForm/Layer/discrete/StackedArea.vue.js

@@ -1,53 +1,71 @@
-import { defineComponent as C, computed as o, createElementBlock as g, openBlock as A, Fragment as U, createVNode as r, createElementVNode as i, unref as n } from "vue";
-import { useStore as x } from "../../../../store.js";
-import { useDefaultAes as c } from "./utils.js";
-import { DEFAULT_WHITE as B, DEFAULT_BLACK as E } from "../../../../constantsAesthetic.js";
-import y from "../../AesSelector.vue.js";
-import { Slider as b, PlCheckbox as k } from "@platforma-sdk/ui-vue";
-const F = { class: "checkbox-item" }, L = { class: "checkbox-item" }, m = "stackedArea", I = /* @__PURE__ */ C({
+import { defineComponent as x, computed as s, createElementBlock as C, openBlock as U, Fragment as A, createVNode as o, createElementVNode as i, withModifiers as O, unref as n } from "vue";
+import { useStore as B } from "../../../../store.js";
+import { useDefaultAes as y } from "./utils.js";
+import { DEFAULT_WHITE as E, DEFAULT_BLACK as w } from "../../../../constantsAesthetic.js";
+import b from "../../AesSelector.vue.js";
+import { PlDropdown as F, Slider as c, PlCheckbox as V } from "@platforma-sdk/ui-vue";
+const L = { class: "checkbox-item" }, M = { class: "checkbox-item" }, m = "stackedArea", G = /* @__PURE__ */ x({
   __name: "StackedArea",
-  setup(O) {
-    const s = x(), t = o(() => s.value.reactive.layersSettings[m]), p = o(
-      () => s.value.reactive.optionsState
-    ), S = o(
-      () => c(t.value.fillColor, p.value, B)
-    ), V = o(
-      () => c(t.value.lineColor, p.value, E)
+  setup(N) {
+    const r = B(), t = s(() => r.value.reactive.layersSettings[m]), d = s(
+      () => r.value.reactive.optionsState
+    ), S = s(
+      () => y(t.value.fillColor, d.value, E)
+    ), g = s(
+      () => y(t.value.lineColor, d.value, w)
     );
-    function d(a, e, l) {
-      e.type === "dataCategorical" ? s.value.reactive.layersSettings[m][l] = {
+    function p(a, e, l) {
+      e.type === "dataCategorical" ? r.value.reactive.layersSettings[m][l] = {
         type: e.inputName
-      } : s.value.reactive.layersSettings[m][l] = a, e.type === "dataCategorical" && typeof a != "string" && (s.value.reactive.dataBindAes[e.selectedSource] = a);
+      } : r.value.reactive.layersSettings[m][l] = a, e.type === "dataCategorical" && typeof a != "string" && (r.value.reactive.dataBindAes[e.selectedSource] = a);
     }
-    const v = o({
+    const k = [
+      { text: "Sum", value: "sum" },
+      { text: "Min", value: "min" },
+      { text: "Max", value: "max" },
+      { text: "Mean", value: "mean" },
+      { text: "Median", value: "median" }
+    ], v = s({
       get: () => t.value.barsOpacity * 100,
       set: (a) => {
         t.value.barsOpacity = a / 100;
       }
-    }), f = o({
+    }), f = s({
       get: () => t.value.areaOpacity * 100,
       set: (a) => {
         t.value.areaOpacity = a / 100;
       }
     });
-    return (a, e) => (A(), g(U, null, [
-      r(y, {
+    return (a, e) => (U(), C(A, null, [
+      o(b, {
         label: "Fill color",
         "form-title": "Fill Color Settings",
         "form-back-title": "Layers",
         type: "fill",
         selected: S.value,
-        onAesUpdate: e[0] || (e[0] = (l, u) => d(l, u, "fillColor"))
+        onAesUpdate: e[0] || (e[0] = (l, u) => p(l, u, "fillColor"))
       }, null, 8, ["selected"]),
-      r(y, {
+      o(b, {
         label: "Stroke color",
         "form-title": "Stroke Color Settings",
         "form-back-title": "Layers",
         type: "stroke",
-        selected: V.value,
-        onAesUpdate: e[1] || (e[1] = (l, u) => d(l, u, "lineColor"))
+        selected: g.value,
+        onAesUpdate: e[1] || (e[1] = (l, u) => p(l, u, "lineColor"))
       }, null, 8, ["selected"]),
-      r(n(b), {
+      i("div", {
+        class: "input-item",
+        onClick: e[3] || (e[3] = O(() => {
+        }, ["stop"]))
+      }, [
+        o(n(F), {
+          label: "Height",
+          options: k,
+          modelValue: t.value.height,
+          "onUpdate:modelValue": e[2] || (e[2] = (l) => t.value.height = l)
+        }, null, 8, ["modelValue"])
+      ]),
+      o(n(c), {
         label: "Opacity of bars",
         min: 0,
         max: 100,
@@ -55,9 +73,9 @@ const F = { class: "checkbox-item" }, L = { class: "checkbox-item" }, m = "stack
         breakpoints: !1,
         measure: "%",
         modelValue: v.value,
-        "onUpdate:modelValue": e[2] || (e[2] = (l) => v.value = l)
+        "onUpdate:modelValue": e[4] || (e[4] = (l) => v.value = l)
       }, null, 8, ["modelValue"]),
-      r(n(b), {
+      o(n(c), {
         label: "Opacity of areas",
         min: 0,
         max: 100,
@@ -65,26 +83,26 @@ const F = { class: "checkbox-item" }, L = { class: "checkbox-item" }, m = "stack
         breakpoints: !1,
         measure: "%",
         modelValue: f.value,
-        "onUpdate:modelValue": e[3] || (e[3] = (l) => f.value = l)
+        "onUpdate:modelValue": e[5] || (e[5] = (l) => f.value = l)
       }, null, 8, ["modelValue"]),
-      i("div", F, [
-        r(n(k), {
+      i("div", L, [
+        o(n(V), {
           modelValue: t.value.normalize,
-          "onUpdate:modelValue": e[4] || (e[4] = (l) => t.value.normalize = l)
+          "onUpdate:modelValue": e[6] || (e[6] = (l) => t.value.normalize = l)
         }, null, 8, ["modelValue"]),
-        e[6] || (e[6] = i("span", null, "Normalize", -1))
+        e[8] || (e[8] = i("span", null, "Normalize", -1))
       ]),
-      i("div", L, [
-        r(n(k), {
+      i("div", M, [
+        o(n(V), {
           modelValue: t.value.showBars,
-          "onUpdate:modelValue": e[5] || (e[5] = (l) => t.value.showBars = l)
+          "onUpdate:modelValue": e[7] || (e[7] = (l) => t.value.showBars = l)
         }, null, 8, ["modelValue"]),
-        e[7] || (e[7] = i("span", null, "Show bars", -1))
+        e[9] || (e[9] = i("span", null, "Show bars", -1))
       ])
     ], 64));
   }
 });
 export {
-  I as default
+  G as default
 };
 //# sourceMappingURL=StackedArea.vue.js.map

package/dist/GraphMaker/forms/LayersForm/Layer/discrete/StackedArea.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackedArea.vue.js","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/discrete/StackedArea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../../store';\nimport { computed } from \"vue\";\nimport type { AesOption } from '../../../../components/AesSettings/types';\nimport type { AestheticMappingCategorical } from '../../../../dataBindAes';\nimport { useDefaultAes } from './utils';\nimport { DiscreteUIState } from \"@milaboratories/pf-plots\";\nimport {\n  DEFAULT_BLACK,\n  DEFAULT_WHITE,\n} from '../../../../constantsAesthetic';\nimport AesSelector from '../../AesSelector.vue';\nimport { PlCheckbox, Slider } from '@platforma-sdk/ui-vue';\n\nconst store = useStore();\nconst layer = \"stackedArea\";\nconst settings = computed(() => store.value.reactive.layersSettings[layer]);\nconst optionsState = computed(\n  () => store.value.reactive.optionsState as DiscreteUIState,\n);\n\nconst fillColor = computed(() =>\n  useDefaultAes(settings.value.fillColor, optionsState.value, DEFAULT_WHITE),\n);\nconst lineColor = computed(() =>\n  useDefaultAes(settings.value.lineColor, optionsState.value, DEFAULT_BLACK),\n);\n\nfunction onUpdate(\n  value: string | AestheticMappingCategorical,\n  colorOption: AesOption,\n  field: \"fillColor\" | \"lineColor\",\n) {\n  if (colorOption.type === \"dataCategorical\") {\n    store.value.reactive.layersSettings[layer][field] = {\n      type: colorOption.inputName,\n    };\n  } else {\n    store.value.reactive.layersSettings[layer][field] = value;\n  }\n  if (colorOption.type === \"dataCategorical\" && typeof value !== \"string\") {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\nconst barOpacity = computed({\n  get: () => settings.value.barsOpacity * 100,\n  set: (newValue: number) => {\n    settings.value.barsOpacity = newValue / 100;\n  }\n});\nconst areaOpacity = computed({\n  get: () => settings.value.areaOpacity * 100,\n  set: (newValue: number) => {\n    settings.value.areaOpacity = newValue / 100;\n  }\n});\n</script>\n\n<template>\n  <aes-selector\n    label=\"Fill color\"\n    form-title=\"Fill Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"fill\"\n    :selected=\"fillColor\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'fillColor')\"\n  />\n  <aes-selector\n    label=\"Stroke color\"\n    form-title=\"Stroke Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"stroke\"\n    :selected=\"lineColor\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'lineColor')\"\n  />\n  <Slider\n      label=\"Opacity of bars\"\n      :min=\"0\"\n      :max=\"100\"\n      :step=\"1\"\n      :breakpoints=\"false\"\n      measure=\"%\"\n      v-model=\"barOpacity\"\n  />\n  <Slider\n      label=\"Opacity of areas\"\n      :min=\"0\"\n      :max=\"100\"\n      :step=\"1\"\n      :breakpoints=\"false\"\n      measure=\"%\"\n      v-model=\"areaOpacity\"\n  />\n  <div class=\"checkbox-item\">\n    <pl-checkbox v-model=\"settings.normalize\" />\n    <span>Normalize</span>\n  </div>\n  <div class=\"checkbox-item\">\n    <pl-checkbox v-model=\"settings.showBars\" />\n    <span>Show bars</span>\n  </div>\n</template>\n"],"names":["layer","store","useStore","settings","computed","optionsState","fillColor","useDefaultAes","DEFAULT_WHITE","lineColor","DEFAULT_BLACK","onUpdate","value","colorOption","field","barOpacity","newValue","areaOpacity"],"mappings":";;;;;;sEAeMA,IAAQ;;;AADd,UAAMC,IAAQC,EAAA,GAERC,IAAWC,EAAS,MAAMH,EAAM,MAAM,SAAS,eAAeD,CAAK,CAAC,GACpEK,IAAeD;AAAA,MACnB,MAAMH,EAAM,MAAM,SAAS;AAAA,IAAA,GAGvBK,IAAYF;AAAA,MAAS,MACzBG,EAAcJ,EAAS,MAAM,WAAWE,EAAa,OAAOG,CAAa;AAAA,IAAA,GAErEC,IAAYL;AAAA,MAAS,MACzBG,EAAcJ,EAAS,MAAM,WAAWE,EAAa,OAAOK,CAAa;AAAA,IAAA;AAG3E,aAASC,EACPC,GACAC,GACAC,GACA;AACA,MAAID,EAAY,SAAS,oBACvBZ,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEc,CAAK,IAAI;AAAA,QAClD,MAAMD,EAAY;AAAA,MAAA,IAGpBZ,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEc,CAAK,IAAIF,GAElDC,EAAY,SAAS,qBAAqB,OAAOD,KAAU,aAC7DX,EAAM,MAAM,SAAS,YAAYY,EAAY,cAAc,IAAID;AAAA,IAEnE;AAEA,UAAMG,IAAaX,EAAS;AAAA,MAC1B,KAAK,MAAMD,EAAS,MAAM,cAAc;AAAA,MACxC,KAAK,CAACa,MAAqB;AACzB,QAAAb,EAAS,MAAM,cAAca,IAAW;AAAA,MAC1C;AAAA,IAAA,CACD,GACKC,IAAcb,EAAS;AAAA,MAC3B,KAAK,MAAMD,EAAS,MAAM,cAAc;AAAA,MACxC,KAAK,CAACa,MAAqB;AACzB,QAAAb,EAAS,MAAM,cAAca,IAAW;AAAA,MAC1C;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"StackedArea.vue.js","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/discrete/StackedArea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../../store';\nimport { computed } from \"vue\";\nimport type { AesOption } from '../../../../components/AesSettings/types';\nimport type { AestheticMappingCategorical } from '../../../../dataBindAes';\nimport { useDefaultAes } from './utils';\nimport { DiscreteUIState } from \"@milaboratories/pf-plots\";\nimport {\n  DEFAULT_BLACK,\n  DEFAULT_WHITE,\n} from '../../../../constantsAesthetic';\nimport AesSelector from '../../AesSelector.vue';\nimport { PlCheckbox, Slider, PlDropdown } from '@platforma-sdk/ui-vue';\n\nconst store = useStore();\nconst layer = \"stackedArea\";\nconst settings = computed(() => store.value.reactive.layersSettings[layer]);\nconst optionsState = computed(\n  () => store.value.reactive.optionsState as DiscreteUIState,\n);\n\nconst fillColor = computed(() =>\n  useDefaultAes(settings.value.fillColor, optionsState.value, DEFAULT_WHITE),\n);\nconst lineColor = computed(() =>\n  useDefaultAes(settings.value.lineColor, optionsState.value, DEFAULT_BLACK),\n);\n\nfunction onUpdate(\n  value: string | AestheticMappingCategorical,\n  colorOption: AesOption,\n  field: \"fillColor\" | \"lineColor\",\n) {\n  if (colorOption.type === \"dataCategorical\") {\n    store.value.reactive.layersSettings[layer][field] = {\n      type: colorOption.inputName,\n    };\n  } else {\n    store.value.reactive.layersSettings[layer][field] = value;\n  }\n  if (colorOption.type === \"dataCategorical\" && typeof value !== \"string\") {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\nconst HEIGHT_OPTIONS: { text:string, value:string }[] = [\n  { text: \"Sum\", value: \"sum\" },\n  { text: \"Min\", value: \"min\" },\n  { text: \"Max\", value: \"max\" },\n  { text: \"Mean\", value: \"mean\" },\n  { text: \"Median\", value: \"median\" },\n];\n\nconst barOpacity = computed({\n  get: () => settings.value.barsOpacity * 100,\n  set: (newValue: number) => {\n    settings.value.barsOpacity = newValue / 100;\n  }\n});\nconst areaOpacity = computed({\n  get: () => settings.value.areaOpacity * 100,\n  set: (newValue: number) => {\n    settings.value.areaOpacity = newValue / 100;\n  }\n});\n</script>\n\n<template>\n  <aes-selector\n    label=\"Fill color\"\n    form-title=\"Fill Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"fill\"\n    :selected=\"fillColor\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'fillColor')\"\n  />\n  <aes-selector\n    label=\"Stroke color\"\n    form-title=\"Stroke Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"stroke\"\n    :selected=\"lineColor\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'lineColor')\"\n  />\n  <div class=\"input-item\" @click.stop>\n    <pl-dropdown\n      label=\"Height\"\n      :options=\"HEIGHT_OPTIONS\"\n      v-model=\"settings.height\"\n    />\n  </div>\n  <Slider\n      label=\"Opacity of bars\"\n      :min=\"0\"\n      :max=\"100\"\n      :step=\"1\"\n      :breakpoints=\"false\"\n      measure=\"%\"\n      v-model=\"barOpacity\"\n  />\n  <Slider\n      label=\"Opacity of areas\"\n      :min=\"0\"\n      :max=\"100\"\n      :step=\"1\"\n      :breakpoints=\"false\"\n      measure=\"%\"\n      v-model=\"areaOpacity\"\n  />\n  <div class=\"checkbox-item\">\n    <pl-checkbox v-model=\"settings.normalize\" />\n    <span>Normalize</span>\n  </div>\n  <div class=\"checkbox-item\">\n    <pl-checkbox v-model=\"settings.showBars\" />\n    <span>Show bars</span>\n  </div>\n</template>\n"],"names":["layer","store","useStore","settings","computed","optionsState","fillColor","useDefaultAes","DEFAULT_WHITE","lineColor","DEFAULT_BLACK","onUpdate","value","colorOption","field","HEIGHT_OPTIONS","barOpacity","newValue","areaOpacity"],"mappings":";;;;;;sEAeMA,IAAQ;;;AADd,UAAMC,IAAQC,EAAA,GAERC,IAAWC,EAAS,MAAMH,EAAM,MAAM,SAAS,eAAeD,CAAK,CAAC,GACpEK,IAAeD;AAAA,MACnB,MAAMH,EAAM,MAAM,SAAS;AAAA,IAAA,GAGvBK,IAAYF;AAAA,MAAS,MACzBG,EAAcJ,EAAS,MAAM,WAAWE,EAAa,OAAOG,CAAa;AAAA,IAAA,GAErEC,IAAYL;AAAA,MAAS,MACzBG,EAAcJ,EAAS,MAAM,WAAWE,EAAa,OAAOK,CAAa;AAAA,IAAA;AAG3E,aAASC,EACPC,GACAC,GACAC,GACA;AACA,MAAID,EAAY,SAAS,oBACvBZ,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEc,CAAK,IAAI;AAAA,QAClD,MAAMD,EAAY;AAAA,MAAA,IAGpBZ,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEc,CAAK,IAAIF,GAElDC,EAAY,SAAS,qBAAqB,OAAOD,KAAU,aAC7DX,EAAM,MAAM,SAAS,YAAYY,EAAY,cAAc,IAAID;AAAA,IAEnE;AAEA,UAAMG,IAAkD;AAAA,MACtD,EAAE,MAAM,OAAO,OAAO,MAAA;AAAA,MACtB,EAAE,MAAM,OAAO,OAAO,MAAA;AAAA,MACtB,EAAE,MAAM,OAAO,OAAO,MAAA;AAAA,MACtB,EAAE,MAAM,QAAQ,OAAO,OAAA;AAAA,MACvB,EAAE,MAAM,UAAU,OAAO,SAAA;AAAA,IAAS,GAG9BC,IAAaZ,EAAS;AAAA,MAC1B,KAAK,MAAMD,EAAS,MAAM,cAAc;AAAA,MACxC,KAAK,CAACc,MAAqB;AACzB,QAAAd,EAAS,MAAM,cAAcc,IAAW;AAAA,MAC1C;AAAA,IAAA,CACD,GACKC,IAAcd,EAAS;AAAA,MAC3B,KAAK,MAAMD,EAAS,MAAM,cAAc;AAAA,MACxC,KAAK,CAACc,MAAqB;AACzB,QAAAd,EAAS,MAAM,cAAcc,IAAW;AAAA,MAC1C;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/GraphMaker/forms/LayersForm/Layer/discrete/StackedBar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackedBar.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/discrete/StackedBar.vue"],"names":[],"mappings":";AAuQA,wBAKG"}
+{"version":3,"file":"StackedBar.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/discrete/StackedBar.vue"],"names":[],"mappings":";AAiTA,wBAKG"}

package/dist/GraphMaker/forms/LayersForm/Layer/discrete/StackedBar.vue.js

@@ -1,68 +1,86 @@
-import { defineComponent as S, computed as r, createElementBlock as k, openBlock as g, Fragment as b, createVNode as s, createElementVNode as d, unref as c } from "vue";
-import { useStore as V } from "../../../../store.js";
+import { defineComponent as C, computed as i, createElementBlock as k, openBlock as x, Fragment as V, createVNode as n, createElementVNode as s, withModifiers as b, unref as u } from "vue";
+import { useStore as U } from "../../../../store.js";
 import { useDefaultAes as f } from "./utils.js";
-import { DEFAULT_WHITE as A, DEFAULT_BLACK as U } from "../../../../constantsAesthetic.js";
-import v from "../../AesSelector.vue.js";
-import { Slider as B, PlCheckbox as x } from "@platforma-sdk/ui-vue";
-const E = { class: "checkbox-item" }, n = "stackedBar", H = /* @__PURE__ */ S({
+import { DEFAULT_WHITE as A, DEFAULT_BLACK as B } from "../../../../constantsAesthetic.js";
+import c from "../../AesSelector.vue.js";
+import { PlDropdown as E, Slider as F, PlCheckbox as L } from "@platforma-sdk/ui-vue";
+const M = { class: "checkbox-item" }, m = "stackedBar", w = /* @__PURE__ */ C({
   __name: "StackedBar",
-  setup(F) {
-    const a = V(), l = r(() => a.value.reactive.layersSettings[n]), u = r(
+  setup(N) {
+    const a = U(), l = i(() => a.value.reactive.layersSettings[m]), d = i(
       () => a.value.reactive.optionsState
-    ), y = r(
-      () => f(l.value.fillColor, u.value, A)
-    ), C = r(
-      () => f(l.value.lineColor, u.value, U)
+    ), y = i(
+      () => f(l.value.fillColor, d.value, A)
+    ), S = i(
+      () => f(l.value.lineColor, d.value, B)
     );
-    function m(o, e, t) {
-      e.type === "dataCategorical" ? a.value.reactive.layersSettings[n][t] = {
+    function p(o, e, t) {
+      e.type === "dataCategorical" ? a.value.reactive.layersSettings[m][t] = {
         type: e.inputName
-      } : a.value.reactive.layersSettings[n][t] = o, e.type === "dataCategorical" && typeof o != "string" && (a.value.reactive.dataBindAes[e.selectedSource] = o);
+      } : a.value.reactive.layersSettings[m][t] = o, e.type === "dataCategorical" && typeof o != "string" && (a.value.reactive.dataBindAes[e.selectedSource] = o);
     }
-    const p = r({
+    const g = [
+      { text: "Sum", value: "sum" },
+      { text: "Min", value: "min" },
+      { text: "Max", value: "max" },
+      { text: "Mean", value: "mean" },
+      { text: "Median", value: "median" }
+    ], v = i({
       get: () => l.value.opacity * 100,
       set: (o) => {
         l.value.opacity = o / 100;
       }
     });
-    return (o, e) => (g(), k(b, null, [
-      s(v, {
+    return (o, e) => (x(), k(V, null, [
+      n(c, {
         label: "Fill color",
         "form-title": "Fill Color Settings",
         "form-back-title": "Layers",
         type: "fill",
         selected: y.value,
-        onAesUpdate: e[0] || (e[0] = (t, i) => m(t, i, "fillColor"))
+        onAesUpdate: e[0] || (e[0] = (t, r) => p(t, r, "fillColor"))
       }, null, 8, ["selected"]),
-      s(v, {
+      n(c, {
         label: "Stroke color",
         "form-title": "Stroke Color Settings",
         "form-back-title": "Layers",
         type: "stroke",
-        selected: C.value,
-        onAesUpdate: e[1] || (e[1] = (t, i) => m(t, i, "lineColor"))
+        selected: S.value,
+        onAesUpdate: e[1] || (e[1] = (t, r) => p(t, r, "lineColor"))
       }, null, 8, ["selected"]),
-      s(c(B), {
+      s("div", {
+        class: "input-item",
+        onClick: e[3] || (e[3] = b(() => {
+        }, ["stop"]))
+      }, [
+        n(u(E), {
+          label: "Height",
+          options: g,
+          modelValue: l.value.height,
+          "onUpdate:modelValue": e[2] || (e[2] = (t) => l.value.height = t)
+        }, null, 8, ["modelValue"])
+      ]),
+      n(u(F), {
         label: "Opacity",
         min: 0,
         max: 100,
         step: 1,
         breakpoints: !1,
         measure: "%",
-        modelValue: p.value,
-        "onUpdate:modelValue": e[2] || (e[2] = (t) => p.value = t)
+        modelValue: v.value,
+        "onUpdate:modelValue": e[4] || (e[4] = (t) => v.value = t)
       }, null, 8, ["modelValue"]),
-      d("div", E, [
-        s(c(x), {
+      s("div", M, [
+        n(u(L), {
           modelValue: l.value.normalize,
-          "onUpdate:modelValue": e[3] || (e[3] = (t) => l.value.normalize = t)
+          "onUpdate:modelValue": e[5] || (e[5] = (t) => l.value.normalize = t)
         }, null, 8, ["modelValue"]),
-        e[4] || (e[4] = d("span", null, "Normalize", -1))
+        e[6] || (e[6] = s("span", null, "Normalize", -1))
       ])
     ], 64));
   }
 });
 export {
-  H as default
+  w as default
 };
 //# sourceMappingURL=StackedBar.vue.js.map

package/dist/GraphMaker/forms/LayersForm/Layer/discrete/StackedBar.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackedBar.vue.js","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/discrete/StackedBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../../store';\nimport { computed } from \"vue\";\nimport type { AesOption } from '../../../../components/AesSettings/types';\nimport type { AestheticMappingCategorical } from '../../../../dataBindAes';\nimport { useDefaultAes } from './utils';\nimport { DiscreteUIState } from \"@milaboratories/pf-plots\";\nimport {\n  DEFAULT_BLACK,\n  DEFAULT_WHITE,\n} from '../../../../constantsAesthetic';\nimport AesSelector from '../../AesSelector.vue';\nimport { PlCheckbox, Slider } from '@platforma-sdk/ui-vue';\n\nconst store = useStore();\nconst layer = \"stackedBar\";\nconst settings = computed(() => store.value.reactive.layersSettings[layer]);\nconst optionsState = computed(\n  () => store.value.reactive.optionsState as DiscreteUIState,\n);\n\nconst fillColor = computed(() =>\n  useDefaultAes(settings.value.fillColor, optionsState.value, DEFAULT_WHITE),\n);\nconst lineColor = computed(() =>\n  useDefaultAes(settings.value.lineColor, optionsState.value, DEFAULT_BLACK),\n);\n\nfunction onUpdate(\n  value: string | AestheticMappingCategorical,\n  colorOption: AesOption,\n  field: \"fillColor\" | \"lineColor\",\n) {\n  if (colorOption.type === \"dataCategorical\") {\n    store.value.reactive.layersSettings[layer][field] = {\n      type: colorOption.inputName,\n    };\n  } else {\n    store.value.reactive.layersSettings[layer][field] = value;\n  }\n  if (colorOption.type === \"dataCategorical\" && typeof value !== \"string\") {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\nconst opacity = computed({\n  get: () => settings.value.opacity * 100,\n  set: (newValue: number) => {\n    settings.value.opacity = newValue / 100;\n  }\n})\n</script>\n\n<template>\n  <aes-selector\n    label=\"Fill color\"\n    form-title=\"Fill Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"fill\"\n    :selected=\"fillColor\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'fillColor')\"\n  />\n  <aes-selector\n    label=\"Stroke color\"\n    form-title=\"Stroke Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"stroke\"\n    :selected=\"lineColor\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'lineColor')\"\n  />\n  <Slider\n      label=\"Opacity\"\n      :min=\"0\"\n      :max=\"100\"\n      :step=\"1\"\n      :breakpoints=\"false\"\n      measure=\"%\"\n      v-model=\"opacity\"\n  />\n  <div class=\"checkbox-item\">\n    <pl-checkbox v-model=\"settings.normalize\" />\n    <span>Normalize</span>\n  </div>\n</template>\n"],"names":["layer","store","useStore","settings","computed","optionsState","fillColor","useDefaultAes","DEFAULT_WHITE","lineColor","DEFAULT_BLACK","onUpdate","value","colorOption","field","opacity","newValue"],"mappings":";;;;;;sCAeMA,IAAQ;;;AADd,UAAMC,IAAQC,EAAA,GAERC,IAAWC,EAAS,MAAMH,EAAM,MAAM,SAAS,eAAeD,CAAK,CAAC,GACpEK,IAAeD;AAAA,MACnB,MAAMH,EAAM,MAAM,SAAS;AAAA,IAAA,GAGvBK,IAAYF;AAAA,MAAS,MACzBG,EAAcJ,EAAS,MAAM,WAAWE,EAAa,OAAOG,CAAa;AAAA,IAAA,GAErEC,IAAYL;AAAA,MAAS,MACzBG,EAAcJ,EAAS,MAAM,WAAWE,EAAa,OAAOK,CAAa;AAAA,IAAA;AAG3E,aAASC,EACPC,GACAC,GACAC,GACA;AACA,MAAID,EAAY,SAAS,oBACvBZ,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEc,CAAK,IAAI;AAAA,QAClD,MAAMD,EAAY;AAAA,MAAA,IAGpBZ,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEc,CAAK,IAAIF,GAElDC,EAAY,SAAS,qBAAqB,OAAOD,KAAU,aAC7DX,EAAM,MAAM,SAAS,YAAYY,EAAY,cAAc,IAAID;AAAA,IAEnE;AAEA,UAAMG,IAAUX,EAAS;AAAA,MACvB,KAAK,MAAMD,EAAS,MAAM,UAAU;AAAA,MACpC,KAAK,CAACa,MAAqB;AACzB,QAAAb,EAAS,MAAM,UAAUa,IAAW;AAAA,MACtC;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"StackedBar.vue.js","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/discrete/StackedBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../../store';\nimport { computed } from \"vue\";\nimport type { AesOption } from '../../../../components/AesSettings/types';\nimport type { AestheticMappingCategorical } from '../../../../dataBindAes';\nimport { useDefaultAes } from './utils';\nimport { DiscreteUIState } from \"@milaboratories/pf-plots\";\nimport {\n  DEFAULT_BLACK,\n  DEFAULT_WHITE,\n} from '../../../../constantsAesthetic';\nimport AesSelector from '../../AesSelector.vue';\nimport { PlCheckbox, Slider, PlDropdown } from '@platforma-sdk/ui-vue';\n\nconst store = useStore();\nconst layer = \"stackedBar\";\nconst settings = computed(() => store.value.reactive.layersSettings[layer]);\nconst optionsState = computed(\n  () => store.value.reactive.optionsState as DiscreteUIState,\n);\n\nconst fillColor = computed(() =>\n  useDefaultAes(settings.value.fillColor, optionsState.value, DEFAULT_WHITE),\n);\nconst lineColor = computed(() =>\n  useDefaultAes(settings.value.lineColor, optionsState.value, DEFAULT_BLACK),\n);\n\nfunction onUpdate(\n  value: string | AestheticMappingCategorical,\n  colorOption: AesOption,\n  field: \"fillColor\" | \"lineColor\",\n) {\n  if (colorOption.type === \"dataCategorical\") {\n    store.value.reactive.layersSettings[layer][field] = {\n      type: colorOption.inputName,\n    };\n  } else {\n    store.value.reactive.layersSettings[layer][field] = value;\n  }\n  if (colorOption.type === \"dataCategorical\" && typeof value !== \"string\") {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\nconst HEIGHT_OPTIONS: { text:string, value:string }[] = [\n  { text: \"Sum\", value: \"sum\" },\n  { text: \"Min\", value: \"min\" },\n  { text: \"Max\", value: \"max\" },\n  { text: \"Mean\", value: \"mean\" },\n  { text: \"Median\", value: \"median\" },\n];\n\nconst opacity = computed({\n  get: () => settings.value.opacity * 100,\n  set: (newValue: number) => {\n    settings.value.opacity = newValue / 100;\n  }\n})\n</script>\n\n<template>\n  <aes-selector\n    label=\"Fill color\"\n    form-title=\"Fill Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"fill\"\n    :selected=\"fillColor\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'fillColor')\"\n  />\n  <aes-selector\n    label=\"Stroke color\"\n    form-title=\"Stroke Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"stroke\"\n    :selected=\"lineColor\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'lineColor')\"\n  />\n  <div class=\"input-item\" @click.stop>\n    <pl-dropdown\n      label=\"Height\"\n      :options=\"HEIGHT_OPTIONS\"\n      v-model=\"settings.height\"\n    />\n  </div>\n  <Slider\n      label=\"Opacity\"\n      :min=\"0\"\n      :max=\"100\"\n      :step=\"1\"\n      :breakpoints=\"false\"\n      measure=\"%\"\n      v-model=\"opacity\"\n  />\n  <div class=\"checkbox-item\">\n    <pl-checkbox v-model=\"settings.normalize\" />\n    <span>Normalize</span>\n  </div>\n</template>\n"],"names":["layer","store","useStore","settings","computed","optionsState","fillColor","useDefaultAes","DEFAULT_WHITE","lineColor","DEFAULT_BLACK","onUpdate","value","colorOption","field","HEIGHT_OPTIONS","opacity","newValue"],"mappings":";;;;;;sCAeMA,IAAQ;;;AADd,UAAMC,IAAQC,EAAA,GAERC,IAAWC,EAAS,MAAMH,EAAM,MAAM,SAAS,eAAeD,CAAK,CAAC,GACpEK,IAAeD;AAAA,MACnB,MAAMH,EAAM,MAAM,SAAS;AAAA,IAAA,GAGvBK,IAAYF;AAAA,MAAS,MACzBG,EAAcJ,EAAS,MAAM,WAAWE,EAAa,OAAOG,CAAa;AAAA,IAAA,GAErEC,IAAYL;AAAA,MAAS,MACzBG,EAAcJ,EAAS,MAAM,WAAWE,EAAa,OAAOK,CAAa;AAAA,IAAA;AAG3E,aAASC,EACPC,GACAC,GACAC,GACA;AACA,MAAID,EAAY,SAAS,oBACvBZ,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEc,CAAK,IAAI;AAAA,QAClD,MAAMD,EAAY;AAAA,MAAA,IAGpBZ,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEc,CAAK,IAAIF,GAElDC,EAAY,SAAS,qBAAqB,OAAOD,KAAU,aAC7DX,EAAM,MAAM,SAAS,YAAYY,EAAY,cAAc,IAAID;AAAA,IAEnE;AAEA,UAAMG,IAAkD;AAAA,MACtD,EAAE,MAAM,OAAO,OAAO,MAAA;AAAA,MACtB,EAAE,MAAM,OAAO,OAAO,MAAA;AAAA,MACtB,EAAE,MAAM,OAAO,OAAO,MAAA;AAAA,MACtB,EAAE,MAAM,QAAQ,OAAO,OAAA;AAAA,MACvB,EAAE,MAAM,UAAU,OAAO,SAAA;AAAA,IAAS,GAG9BC,IAAUZ,EAAS;AAAA,MACvB,KAAK,MAAMD,EAAS,MAAM,UAAU;AAAA,MACpC,KAAK,CAACc,MAAqB;AACzB,QAAAd,EAAS,MAAM,UAAUc,IAAW;AAAA,MACtC;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}