@milaboratories/graph-maker 1.2.5 → 1.2.7

package/dist/forms/AxesSettingsForm/HistogramAxesSettingsForm.vue2.js

@@ -1,5 +1,295 @@
-import f from "./HistogramAxesSettingsForm.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=HistogramAxesSettingsForm.vue2.js.map
+import { MAX_FACETS_COUNT as e } from "../../constantsCommon.js";
+import t from "../../components/CollapsableBlock.js";
+import n from "../../icons/Right.js";
+import r from "../../icons/Down.js";
+import i from "../../components/BtnIconGroup.js";
+import a from "../../icons/AlignLeft.js";
+import o from "../../icons/AlignCenter.js";
+import s from "../../icons/AlignRight.js";
+import c from "../../icons/FrameFull.js";
+import l from "../../icons/FrameEmpty.js";
+import u from "../../icons/FrameLeft.js";
+import d from "../../icons/FrameBottom.js";
+import ee from "../../icons/FrameLeftBottom.js";
+import { useStore as te } from "../../store.js";
+import { createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, openBlock as v, unref as y, withCtx as b } from "vue";
+import { PlBtnGroup as x, PlCheckbox as S, PlNumberField as C, PlTextField as w, PlToggleSwitch as T, Slider as E } from "@platforma-sdk/ui-vue";
+var D = { class: "axes-settings-list" }, O = { style: { padding: "0 24px 8px" } }, k = { class: "axes-settings-options-row block" }, A = {
+	key: 0,
+	class: "axes-settings-input"
+}, j = { class: "axes-settings-options-row" }, M = { class: "axes-settings-options-row" }, N = { class: "axes-settings-options-row block" }, P = { key: 0 }, F = { class: "axes-settings-options-row block" }, I = { class: "axes-settings-options-row table" }, L = { class: "axes-settings-options-row table" }, ne = { class: "axes-settings-options-row block" }, R = { class: "axes-settings-options-row" }, z = { class: "axes-settings-options-row table" }, B = { class: "axes-settings-options-row table" }, V = { class: "other" }, H = { class: "axes-settings-options-row" }, U = { class: "axes-settings-options-row" }, W = { class: "axes-settings-options-row" }, G = { class: "axes-settings-options-row" }, K = { class: "axes-settings-options-row" }, q = { class: "axes-settings-options-row" }, J = { class: "axes-settings-options-row" }, Y = { class: "axes-settings-options-row block" }, X = /* @__PURE__ */ _({
+	__name: "HistogramAxesSettingsForm",
+	setup(_) {
+		let X = te().value.reactive.axesSettings, Z = {
+			height: 40,
+			horizontalPadding: 12,
+			defaultState: "open",
+			contentPadding: "0 24px"
+		}, re = [
+			{
+				value: "left",
+				icon: a
+			},
+			{
+				value: "center",
+				icon: o
+			},
+			{
+				value: "right",
+				icon: s
+			}
+		], Q = [
+			{
+				value: "auto",
+				text: "Auto"
+			},
+			{
+				value: "custom",
+				text: "Custom"
+			},
+			{
+				value: "hidden",
+				text: "Hidden"
+			}
+		], $ = [{
+			value: "linear",
+			text: "Linear"
+		}, {
+			value: "log",
+			text: "Log"
+		}], ie = [
+			{
+				value: "empty",
+				icon: l
+			},
+			{
+				value: "left",
+				icon: u
+			},
+			{
+				value: "bottom",
+				icon: d
+			},
+			{
+				value: "left-bottom",
+				icon: ee
+			},
+			{
+				value: "full",
+				icon: c
+			}
+		], ae = [
+			{
+				text: "X",
+				value: "x"
+			},
+			{
+				text: "Y",
+				value: "y"
+			},
+			{
+				text: "XY",
+				value: "xy"
+			},
+			{
+				text: "None",
+				value: "none"
+			}
+		];
+		return (a, o) => (v(), p("div", {
+			class: "axes-form",
+			onClick: o[22] ||= (e) => e.stopPropagation()
+		}, [o[32] ||= m("h3", { class: "axes-title" }, " Axes ", -1), m("div", D, [
+			m("div", O, [g(y(E), {
+				modelValue: y(X).other.binsCount,
+				"onUpdate:modelValue": o[0] ||= (e) => y(X).other.binsCount = e,
+				style: { width: "100%" },
+				label: "Bins count",
+				min: 3,
+				max: 100,
+				step: 1,
+				breakpoints: !1,
+				mode: "input"
+			}, null, 8, ["modelValue"])]),
+			g(t, {
+				title: "Title",
+				settings: Z,
+				icon: n,
+				"icon-open": r
+			}, {
+				default: b(() => [
+					m("div", k, [g(y(x), {
+						modelValue: y(X).title.mode,
+						"onUpdate:modelValue": o[1] ||= (e) => y(X).title.mode = e,
+						label: "Title",
+						options: Q,
+						compact: !0
+					}, null, 8, ["modelValue"])]),
+					y(X).title.mode === "custom" ? (v(), p("div", A, [g(y(w), {
+						modelValue: y(X).title.value,
+						"onUpdate:modelValue": o[2] ||= (e) => y(X).title.value = e,
+						label: "Chart title",
+						placeholder: "Chart title"
+					}, null, 8, ["modelValue"])])) : f("", !0),
+					m("div", j, [o[23] ||= m("span", null, "Alignment", -1), g(i, {
+						modelValue: y(X).title.position,
+						"onUpdate:modelValue": o[3] ||= (e) => y(X).title.position = e,
+						options: re
+					}, null, 8, ["modelValue"])])
+				]),
+				_: 1
+			}),
+			g(t, {
+				title: "X-axis",
+				settings: Z,
+				icon: n,
+				"icon-open": r
+			}, {
+				default: b(() => [
+					m("div", M, [g(y(S), {
+						modelValue: y(X).axisX.hideAxisLabels,
+						"onUpdate:modelValue": o[4] ||= (e) => y(X).axisX.hideAxisLabels = e
+					}, {
+						default: b(() => [...o[24] ||= [h("Hide axis labels", -1)]]),
+						_: 1
+					}, 8, ["modelValue"])]),
+					m("div", N, [g(y(x), {
+						modelValue: y(X).axisX.titleMode,
+						"onUpdate:modelValue": o[5] ||= (e) => y(X).axisX.titleMode = e,
+						label: "Title",
+						options: Q,
+						compact: !0
+					}, null, 8, ["modelValue"])]),
+					y(X).axisX.titleMode === "custom" ? (v(), p("div", P, [g(y(w), {
+						modelValue: y(X).axisX.customTitle,
+						"onUpdate:modelValue": o[6] ||= (e) => y(X).axisX.customTitle = e,
+						label: "Text",
+						placeholder: "Type"
+					}, null, 8, ["modelValue"])])) : f("", !0),
+					m("div", F, [g(y(x), {
+						modelValue: y(X).axisX.scale,
+						"onUpdate:modelValue": o[7] ||= (e) => y(X).axisX.scale = e,
+						label: "Scale",
+						options: $,
+						compact: !0
+					}, null, 8, ["modelValue"])]),
+					m("div", I, [o[25] ||= m("span", null, "Gridlines", -1), g(y(T), {
+						modelValue: y(X).axisX.gridlines,
+						"onUpdate:modelValue": o[8] ||= (e) => y(X).axisX.gridlines = e
+					}, null, 8, ["modelValue"])]),
+					m("div", L, [o[26] ||= m("span", null, "Ticks", -1), g(y(T), {
+						modelValue: y(X).axisX.ticks,
+						"onUpdate:modelValue": o[9] ||= (e) => y(X).axisX.ticks = e
+					}, null, 8, ["modelValue"])])
+				]),
+				_: 1
+			}),
+			g(t, {
+				title: "Y-axis",
+				settings: Z,
+				icon: n,
+				"icon-open": r
+			}, {
+				default: b(() => [
+					m("div", ne, [g(y(x), {
+						modelValue: y(X).axisY.scale,
+						"onUpdate:modelValue": o[10] ||= (e) => y(X).axisY.scale = e,
+						label: "Scale",
+						options: $,
+						compact: !0
+					}, null, 8, ["modelValue"])]),
+					m("div", R, [g(y(S), {
+						modelValue: y(X).axisY.hideAxisLabels,
+						"onUpdate:modelValue": o[11] ||= (e) => y(X).axisY.hideAxisLabels = e
+					}, {
+						default: b(() => [...o[27] ||= [h("Hide axis labels", -1)]]),
+						_: 1
+					}, 8, ["modelValue"])]),
+					m("div", z, [o[28] ||= m("span", null, "Gridlines", -1), g(y(T), {
+						modelValue: y(X).axisY.gridlines,
+						"onUpdate:modelValue": o[12] ||= (e) => y(X).axisY.gridlines = e
+					}, null, 8, ["modelValue"])]),
+					m("div", B, [o[29] ||= m("span", null, "Ticks", -1), g(y(T), {
+						modelValue: y(X).axisY.ticks,
+						"onUpdate:modelValue": o[13] ||= (e) => y(X).axisY.ticks = e
+					}, null, 8, ["modelValue"])])
+				]),
+				_: 1
+			}),
+			m("div", V, [
+				m("div", H, [g(y(S), {
+					modelValue: y(X).other.showLegend,
+					"onUpdate:modelValue": o[14] ||= (e) => y(X).other.showLegend = e
+				}, {
+					default: b(() => [...o[30] ||= [h("Show legend", -1)]]),
+					_: 1
+				}, 8, ["modelValue"])]),
+				m("div", U, [g(y(w), {
+					modelValue: y(X).other.nullValueLabel,
+					"onUpdate:modelValue": o[15] ||= (e) => y(X).other.nullValueLabel = e,
+					label: "Null value label",
+					placeholder: "NA"
+				}, null, 8, ["modelValue"])]),
+				m("div", W, [g(y(C), {
+					modelValue: y(X).other.maxFacetsCount,
+					"onUpdate:modelValue": o[16] ||= (e) => y(X).other.maxFacetsCount = e,
+					label: "Max facets count",
+					min: 2,
+					max: y(e)
+				}, null, 8, ["modelValue", "max"])]),
+				m("div", G, [g(y(x), {
+					modelValue: y(X).other.groupingDirection,
+					"onUpdate:modelValue": o[17] ||= (e) => y(X).other.groupingDirection = e,
+					label: "Grouping direction",
+					options: [{
+						value: "straight",
+						label: "Straight"
+					}, {
+						value: "reverse",
+						label: "Reverse"
+					}],
+					compact: !0
+				}, null, 8, ["modelValue"])]),
+				m("div", K, [g(y(x), {
+					modelValue: y(X).other.groupingStack,
+					"onUpdate:modelValue": o[18] ||= (e) => y(X).other.groupingStack = e,
+					label: "Stack mode",
+					options: [{
+						value: "vertical",
+						label: "Vertical"
+					}, {
+						value: "horizontal",
+						label: "Horizontal"
+					}],
+					compact: !0
+				}, null, 8, ["modelValue"])]),
+				m("div", q, [o[31] ||= m("span", null, "Frame", -1), g(i, {
+					modelValue: y(X).other.frame,
+					"onUpdate:modelValue": o[19] ||= (e) => y(X).other.frame = e,
+					options: ie
+				}, null, 8, ["modelValue"])]),
+				m("div", J, [g(y(E), {
+					modelValue: y(X).other.facetColumns,
+					"onUpdate:modelValue": o[20] ||= (e) => y(X).other.facetColumns = e,
+					style: { width: "100%" },
+					label: "Facet column count",
+					min: 1,
+					max: 6,
+					step: 1,
+					breakpoints: !0,
+					mode: "input"
+				}, null, 8, ["modelValue"])]),
+				m("div", Y, [g(y(x), {
+					modelValue: y(X).other.facetSharedBy,
+					"onUpdate:modelValue": o[21] ||= (e) => y(X).other.facetSharedBy = e,
+					label: "Facet shared by",
+					options: ae,
+					compact: !0
+				}, null, 8, ["modelValue"])])
+			])
+		])]));
+	}
+});
+export { X as default };
+
+//# sourceMappingURL=HistogramAxesSettingsForm.vue2.js.map

package/dist/forms/AxesSettingsForm/HistogramAxesSettingsForm.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"HistogramAxesSettingsForm.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"HistogramAxesSettingsForm.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/forms/AxesSettingsForm/HistogramAxesSettingsForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Slider, PlToggleSwitch, PlCheckbox, PlNumberField } from '@platforma-sdk/ui-vue';\nimport { useStore } from '../../store';\nimport CollapsableBlock from '../../components/CollapsableBlock.vue';\nimport Right from '../../icons/Right.vue';\nimport Down from '../../icons/Down.vue';\nimport { PlTextField, PlBtnGroup } from '@platforma-sdk/ui-vue';\nimport BtnIconGroup from '../../components/BtnIconGroup.vue';\nimport AlignLeft from '../../icons/AlignLeft.vue';\nimport AlignCenter from '../../icons/AlignCenter.vue';\nimport AlignRight from '../../icons/AlignRight.vue';\nimport FrameFull from '../../icons/FrameFull.vue';\nimport FrameEmpty from '../../icons/FrameEmpty.vue';\nimport FrameLeft from '../../icons/FrameLeft.vue';\nimport FrameBottom from '../../icons/FrameBottom.vue';\nimport FrameLeftBottom from '../../icons/FrameLeftBottom.vue';\nimport { MAX_FACETS_COUNT } from '../../constantsCommon';\n\nconst store = useStore();\nconst settings = store.value.reactive.axesSettings;\nconst blockSettings = {\n  height: 40,\n  horizontalPadding: 12,\n  defaultState: 'open' as 'open' | 'close',\n  contentPadding: '0 24px',\n};\n\nconst OPTIONS_TITLE_ALIGN = [\n  { value: 'left', icon: AlignLeft },\n  { value: 'center', icon: AlignCenter },\n  { value: 'right', icon: AlignRight },\n];\nconst OPTIONS_AXIS_LABEL_MODE = [\n  { value: 'auto', text: 'Auto' },\n  { value: 'custom', text: 'Custom' },\n  { value: 'hidden', text: 'Hidden' },\n];\nconst OPTIONS_SCALE = [\n  { value: 'linear', text: 'Linear' },\n  { value: 'log', text: 'Log' },\n];\nconst OPTIONS_CHART_FRAME = [\n  { value: 'empty', icon: FrameEmpty },\n  { value: 'left', icon: FrameLeft },\n  { value: 'bottom', icon: FrameBottom },\n  { value: 'left-bottom', icon: FrameLeftBottom },\n  { value: 'full', icon: FrameFull },\n];\nconst OPTIONS_FACET_SHARED = [\n  { text: 'X', value: 'x' },\n  { text: 'Y', value: 'y' },\n  { text: 'XY', value: 'xy' },\n  { text: 'None', value: 'none' },\n];\n\n</script>\n\n<template>\n  <div class=\"axes-form\" @click=\"(e) => e.stopPropagation()\">\n    <h3 class=\"axes-title\">\n      Axes\n    </h3>\n    <div class=\"axes-settings-list\">\n      <div :style=\"{padding: '0 24px 8px'}\">\n        <Slider\n          v-model=\"settings.other.binsCount\"\n          :style=\"{width: '100%'}\"\n          label=\"Bins count\"\n          :min=\"3\"\n          :max=\"100\"\n          :step=\"1\"\n          :breakpoints=\"false\"\n          mode=\"input\"\n        />\n      </div>\n      <!--      Chart title -->\n      <CollapsableBlock title=\"Title\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.title.mode\"\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            :compact=\"true\"\n          />\n        </div>\n        <div v-if=\"settings.title.mode === 'custom'\" class=\"axes-settings-input\">\n          <PlTextField\n            v-model=\"settings.title.value\"\n            label=\"Chart title\"\n            placeholder=\"Chart title\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Alignment</span>\n          <BtnIconGroup v-model=\"settings.title.position\" :options=\"OPTIONS_TITLE_ALIGN\"/>\n        </div>\n      </CollapsableBlock>\n      <!--      X axis settings-->\n      <CollapsableBlock title=\"X-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.axisX.hideAxisLabels\">Hide axis labels</PlCheckbox>\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.axisX.titleMode\"\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            :compact=\"true\"\n          />\n        </div>\n        <div v-if=\"settings.axisX.titleMode === 'custom'\">\n          <PlTextField\n            v-model=\"settings.axisX.customTitle\"\n            label=\"Text\"\n            placeholder=\"Type\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.axisX.scale\"\n            label=\"Scale\"\n            :options=\"OPTIONS_SCALE\"\n            :compact=\"true\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Gridlines</span>\n          <PlToggleSwitch v-model=\"settings.axisX.gridlines\" />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Ticks</span>\n          <PlToggleSwitch v-model=\"settings.axisX.ticks\" />\n        </div>\n      </CollapsableBlock>\n      <!--      Y axis settings-->\n      <CollapsableBlock title=\"Y-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.axisY.scale\"\n            label=\"Scale\"\n            :options=\"OPTIONS_SCALE\"\n            :compact=\"true\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.axisY.hideAxisLabels\">Hide axis labels</PlCheckbox>\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Gridlines</span>\n          <PlToggleSwitch v-model=\"settings.axisY.gridlines\" />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Ticks</span>\n          <PlToggleSwitch v-model=\"settings.axisY.ticks\" />\n        </div>\n      </CollapsableBlock>\n      <!--      Facet settings-->\n      <div class=\"other\">\n        <div class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.other.showLegend\">Show legend</PlCheckbox>\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlTextField v-model=\"settings.other.nullValueLabel\" label=\"Null value label\" placeholder=\"NA\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlNumberField\n            v-model=\"settings.other.maxFacetsCount\"\n            label=\"Max facets count\"\n            :min=\"2\"\n            :max=\"MAX_FACETS_COUNT\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlBtnGroup\n            v-model=\"settings.other.groupingDirection\"\n            label=\"Grouping direction\"\n            :options=\"[{value: 'straight', label: 'Straight'}, {value: 'reverse', label: 'Reverse'}]\"\n            :compact=\"true\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlBtnGroup\n            v-model=\"settings.other.groupingStack\"\n            label=\"Stack mode\"\n            :options=\"[{value: 'vertical', label: 'Vertical'}, {value: 'horizontal', label: 'Horizontal'}]\"\n            :compact=\"true\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Frame</span>\n          <BtnIconGroup v-model=\"settings.other.frame\" :options=\"OPTIONS_CHART_FRAME\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <Slider\n            v-model=\"settings.other.facetColumns\"\n            :style=\"{width: '100%'}\"\n            label=\"Facet column count\"\n            :min=\"1\"\n            :max=\"6\"\n            :step=\"1\"\n            :breakpoints=\"true\"\n            mode=\"input\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.other.facetSharedBy\"\n            label=\"Facet shared by\"\n            :options=\"OPTIONS_FACET_SHARED\"\n            :compact=\"true\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAmBA,IAAM,IADQ,IAAU,CACD,MAAM,SAAS,cAChC,IAAgB;GACpB,QAAQ;GACR,mBAAmB;GACnB,cAAc;GACd,gBAAgB;GACjB,EAEK,KAAsB;GAC1B;IAAE,OAAO;IAAQ,MAAM;IAAW;GAClC;IAAE,OAAO;IAAU,MAAM;IAAa;GACtC;IAAE,OAAO;IAAS,MAAM;IAAY;GACrC,EACK,IAA0B;GAC9B;IAAE,OAAO;IAAQ,MAAM;IAAQ;GAC/B;IAAE,OAAO;IAAU,MAAM;IAAU;GACnC;IAAE,OAAO;IAAU,MAAM;IAAU;GACpC,EACK,IAAgB,CACpB;GAAE,OAAO;GAAU,MAAM;GAAU,EACnC;GAAE,OAAO;GAAO,MAAM;GAAO,CAC9B,EACK,KAAsB;GAC1B;IAAE,OAAO;IAAS,MAAM;IAAY;GACpC;IAAE,OAAO;IAAQ,MAAM;IAAW;GAClC;IAAE,OAAO;IAAU,MAAM;IAAa;GACtC;IAAE,OAAO;IAAe,MAAM;IAAiB;GAC/C;IAAE,OAAO;IAAQ,MAAM;IAAW;GACnC,EACK,KAAuB;GAC3B;IAAE,MAAM;IAAK,OAAO;IAAK;GACzB;IAAE,MAAM;IAAK,OAAO;IAAK;GACzB;IAAE,MAAM;IAAM,OAAO;IAAM;GAC3B;IAAE,MAAM;IAAQ,OAAO;IAAQ;GAChC;yBAKC,EA4JM,OAAA;GA5JD,OAAM;GAAa,SAAK,AAAA,EAAA,SAAG,MAAM,EAAE,iBAAe;gBACrD,EAEK,MAAA,EAFD,OAAM,cAAY,EAAC,UAEvB,GAAA,EACA,EAuJM,OAvJN,GAuJM;GAtJJ,EAWM,OAXN,GAWM,CAVJ,EASE,EAAA,EAAA,EAAA;gBARS,EAAA,EAAQ,CAAC,MAAM;6CAAf,EAAQ,CAAC,MAAM,YAAS;IAChC,OAAO,EAAA,OAAA,QAAe;IACvB,OAAM;IACL,KAAK;IACL,KAAK;IACL,MAAM;IACN,aAAa;IACd,MAAK;;GAIT,EAoBmB,GAAA;IApBD,OAAM;IAAS,UAAU;IAAgB,MAAM;IAAQ,aAAW;;qBAQ5E;KAPN,EAOM,OAPN,GAOM,CANJ,EAKE,EAAA,EAAA,EAAA;kBAJS,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,OAAI;MAC5B,OAAM;MACL,SAAS;MACT,SAAS;;KAGH,EAAA,EAAQ,CAAC,MAAM,SAAI,YAAA,GAAA,EAA9B,EAMM,OANN,GAMM,CALJ,EAIE,EAAA,EAAA,EAAA;kBAHS,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,QAAK;MAC7B,OAAM;MACN,aAAY;;KAGhB,EAGM,OAHN,GAGM,CAAA,AAAA,EAAA,QAFJ,EAAsB,QAAA,MAAhB,aAAS,GAAA,EACf,EAAgF,GAAA;kBAAzD,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,WAAQ;MAAG,SAAS;;;;;GAI9D,EAmCmB,GAAA;IAnCD,OAAM;IAAU,UAAU;IAAgB,MAAM;IAAQ,aAAW;;qBAG7E;KAFN,EAEM,OAFN,GAEM,CADJ,EAAiF,EAAA,EAAA,EAAA;kBAA5D,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,iBAAc;;uBAAkB,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAhB,oBAAgB,GAAA,CAAA,CAAA,CAAA;;;KAEtE,EAOM,OAPN,GAOM,CANJ,EAKE,EAAA,EAAA,EAAA;kBAJS,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,YAAS;MACjC,OAAM;MACL,SAAS;MACT,SAAS;;KAGH,EAAA,EAAQ,CAAC,MAAM,cAAS,YAAA,GAAA,EAAnC,EAMM,OAAA,GAAA,CALJ,EAIE,EAAA,EAAA,EAAA;kBAHS,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,cAAW;MACnC,OAAM;MACN,aAAY;;KAGhB,EAOM,OAPN,GAOM,CANJ,EAKE,EAAA,EAAA,EAAA;kBAJS,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,QAAK;MAC7B,OAAM;MACL,SAAS;MACT,SAAS;;KAGd,EAGM,OAHN,GAGM,CAAA,AAAA,EAAA,QAFJ,EAAsB,QAAA,MAAhB,aAAS,GAAA,EACf,EAAqD,EAAA,EAAA,EAAA;kBAA5B,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,YAAS;;KAEnD,EAGM,OAHN,GAGM,CAAA,AAAA,EAAA,QAFJ,EAAkB,QAAA,MAAZ,SAAK,GAAA,EACX,EAAiD,EAAA,EAAA,EAAA;kBAAxB,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,QAAK;;;;;GAIjD,EAoBmB,GAAA;IApBD,OAAM;IAAU,UAAU;IAAgB,MAAM;IAAQ,aAAW;;qBAQ7E;KAPN,EAOM,OAPN,IAOM,CANJ,EAKE,EAAA,EAAA,EAAA;kBAJS,EAAA,EAAQ,CAAC,MAAM;gDAAf,EAAQ,CAAC,MAAM,QAAK;MAC7B,OAAM;MACL,SAAS;MACT,SAAS;;KAGd,EAEM,OAFN,GAEM,CADJ,EAAiF,EAAA,EAAA,EAAA;kBAA5D,EAAA,EAAQ,CAAC,MAAM;gDAAf,EAAQ,CAAC,MAAM,iBAAc;;uBAAkB,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAhB,oBAAgB,GAAA,CAAA,CAAA,CAAA;;;KAEtE,EAGM,OAHN,GAGM,CAAA,AAAA,EAAA,QAFJ,EAAsB,QAAA,MAAhB,aAAS,GAAA,EACf,EAAqD,EAAA,EAAA,EAAA;kBAA5B,EAAA,EAAQ,CAAC,MAAM;gDAAf,EAAQ,CAAC,MAAM,YAAS;;KAEnD,EAGM,OAHN,GAGM,CAAA,AAAA,EAAA,QAFJ,EAAkB,QAAA,MAAZ,SAAK,GAAA,EACX,EAAiD,EAAA,EAAA,EAAA;kBAAxB,EAAA,EAAQ,CAAC,MAAM;gDAAf,EAAQ,CAAC,MAAM,QAAK;;;;;GAIjD,EAuDM,OAvDN,GAuDM;IAtDJ,EAEM,OAFN,GAEM,CADJ,EAAwE,EAAA,EAAA,EAAA;iBAAnD,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,aAAU;;sBAAa,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAX,eAAW,GAAA,CAAA,CAAA,CAAA;;;IAE7D,EAEM,OAFN,GAEM,CADJ,EAAiG,EAAA,EAAA,EAAA;iBAA3E,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,iBAAc;KAAE,OAAM;KAAmB,aAAY;;IAE5F,EAOM,OAPN,GAOM,CANJ,EAKE,EAAA,EAAA,EAAA;iBAJS,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,iBAAc;KACtC,OAAM;KACL,KAAK;KACL,KAAK,EAAA,EAAgB;;IAG1B,EAOM,OAPN,GAOM,CANJ,EAKE,EAAA,EAAA,EAAA;iBAJS,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,oBAAiB;KACzC,OAAM;KACL,SAAS,CAAA;MAAA,OAAA;MAAA,OAAA;MAAA,EAAA;MAAA,OAAA;MAAA,OAAA;MAAA,CAA8E;KACvF,SAAS;;IAGd,EAOM,OAPN,GAOM,CANJ,EAKE,EAAA,EAAA,EAAA;iBAJS,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,gBAAa;KACrC,OAAM;KACL,SAAS,CAAA;MAAA,OAAA;MAAA,OAAA;MAAA,EAAA;MAAA,OAAA;MAAA,OAAA;MAAA,CAAoF;KAC7F,SAAS;;IAGd,EAGM,OAHN,GAGM,CAAA,AAAA,EAAA,QAFJ,EAAkB,QAAA,MAAZ,SAAK,GAAA,EACX,EAA8E,GAAA;iBAAvD,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,QAAK;KAAG,SAAS;;IAEzD,EAWM,OAXN,GAWM,CAVJ,EASE,EAAA,EAAA,EAAA;iBARS,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,eAAY;KACnC,OAAO,EAAA,OAAA,QAAe;KACvB,OAAM;KACL,KAAK;KACL,KAAK;KACL,MAAM;KACN,aAAa;KACd,MAAK;;IAGT,EAOM,OAPN,GAOM,CANJ,EAKE,EAAA,EAAA,EAAA;iBAJS,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,gBAAa;KACrC,OAAM;KACL,SAAS;KACT,SAAS"}

package/dist/forms/AxesSettingsForm/ScatterplotAxesSettingsForm.js

@@ -0,0 +1,5 @@
+import e from "./ScatterplotAxesSettingsForm.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=ScatterplotAxesSettingsForm.js.map

package/dist/forms/AxesSettingsForm/ScatterplotAxesSettingsForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterplotAxesSettingsForm.js","names":[],"sources":["../../../src/forms/AxesSettingsForm/ScatterplotAxesSettingsForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Slider, PlToggleSwitch, PlCheckbox, PlNumberField } from '@platforma-sdk/ui-vue';\nimport { useStore } from '../../store';\nimport CollapsableBlock from '../../components/CollapsableBlock.vue';\nimport Right from '../../icons/Right.vue';\nimport Down from '../../icons/Down.vue';\nimport { PlTextField, PlBtnGroup } from '@platforma-sdk/ui-vue';\nimport BtnIconGroup from '../../components/BtnIconGroup.vue';\nimport AlignLeft from '../../icons/AlignLeft.vue';\nimport AlignCenter from '../../icons/AlignCenter.vue';\nimport AlignRight from '../../icons/AlignRight.vue';\nimport FrameFull from '../../icons/FrameFull.vue';\nimport FrameEmpty from '../../icons/FrameEmpty.vue';\nimport FrameLeft from '../../icons/FrameLeft.vue';\nimport FrameBottom from '../../icons/FrameBottom.vue';\nimport FrameLeftBottom from '../../icons/FrameLeftBottom.vue';\nimport type { AesButtonProps } from '../../components/AesButton.vue';\nimport AesButton from '../../components/AesButton.vue';\nimport FormWrapper from '../../components/AesSettings/FormWrapper.vue';\nimport { computed, ref } from 'vue';\nimport Popup from '../../components/Popup.vue';\nimport FixedLineTypeList from '../../components/AesSettings/FixedLineTypeList.vue';\nimport type { LineType } from '../../components/AesSettings/types';\nimport { getPopupHeightForFixedAesList } from '../../utils/getPopupHeightForFixedAesList';\nimport { FIXED_LINE_TYPES } from '../../constantsAesthetic';\nimport ReorderForm from '../../components/ReorderForm.vue';\nimport Rotation0 from '../../icons/Rotation0.vue';\nimport Rotation45 from '../../icons/Rotation45.vue';\nimport Rotation90 from '../../icons/Rotation90.vue';\nimport type { LabelsRotation } from '../../types';\nimport { MAX_FACETS_COUNT, MAX_GROUPS_COUNT } from '../../constantsCommon';\n\nconst store = useStore();\nconst settings = store.value.reactive.axesSettings;\nconst chartType = computed(() => store.value.reactive.chartType);\nconst blockSettings = {\n  height: 40,\n  horizontalPadding: 12,\n  defaultState: 'open' as 'open' | 'close',\n  contentPadding: '0 24px',\n};\n\nconst OPTIONS_TITLE_ALIGN = [\n  { value: 'left', icon: AlignLeft },\n  { value: 'center', icon: AlignCenter },\n  { value: 'right', icon: AlignRight },\n];\n// const OPTIONS_FACET_FRAME = [\n//   {value: 'empty', icon: FrameEmpty},\n//   {value: 'full', icon: FrameFull},\n// ]\nconst OPTIONS_AXIS_LABEL_MODE = [\n  { value: 'auto', text: 'Auto' },\n  { value: 'custom', text: 'Custom' },\n  { value: 'hidden', text: 'Hidden' },\n];\nconst OPTIONS_SCALE = [\n  { value: 'linear', text: 'Linear' },\n  { value: 'log', text: 'Log' },\n];\nconst OPTIONS_CHART_FRAME = [\n  { value: 'empty', icon: FrameEmpty },\n  { value: 'left', icon: FrameLeft },\n  { value: 'bottom', icon: FrameBottom },\n  { value: 'left-bottom', icon: FrameLeftBottom },\n  { value: 'full', icon: FrameFull },\n];\nconst OPTIONS_FACET_SHARED = [\n  { text: 'X', value: 'x' },\n  { text: 'Y', value: 'y' },\n  { text: 'XY', value: 'xy' },\n  { text: 'None', value: 'none' },\n];\nconst OPTIONS_LABELS_ROTATION = [\n  { value: 'center', icon: Rotation0 },\n  { value: '45deg', icon: Rotation45 },\n  { value: '90deg', icon: Rotation90 },\n];\nconst significantLineStyleX = ref(settings.axisX.significantLinesStyle);\nconst significantLineStyleY = ref(settings.axisY.significantLinesStyle);\nconst linesPopupHeight = computed(() => getPopupHeightForFixedAesList(FIXED_LINE_TYPES.length, 'lineType'));\nconst linesAesButtonXRef = ref();\nconst linesAesButtonYRef = ref();\nconst openLinesPopupX = ref(false);\nconst openLinesPopupY = ref(false);\n\nconst xSource = computed(() => {\n  const x = store.value.reactive.optionsState.components.x.selectorStates;\n  return x.length ? x[0].selectedSource : null;\n});\nconst ySource = computed(() => {\n  const y = store.value.reactive.optionsState.components.y.selectorStates;\n  return y.length ? y[0].selectedSource : null;\n});\n\nconst discreteX = computed(() => {\n  if (!xSource.value) {\n    return false;\n  }\n  const info = store.value.inputGuide.value.getSourceInfo(xSource.value);\n  return info.type === 'String';\n});\nconst discreteY = computed(() => {\n  if (!ySource.value) {\n    return false;\n  }\n  const info = store.value.inputGuide.value.getSourceInfo(ySource.value);\n  return info.type === 'String';\n});\nconst reorderX = ref(false);\nconst reorderY = ref(false);\nconst axisOrderX = computed({\n  get: () => {\n    if (!discreteX.value || !xSource.value) {\n      return null;\n    }\n    const savedOrder = store.value.reactive.axesSettings.axisX.order;\n    const entryX = store.value.uniqueValuesData.value[xSource.value];\n    return savedOrder?.source === xSource.value ? savedOrder.options : (entryX?.overflow ? undefined : entryX?.options);\n  },\n  set: (v) => {\n    if (xSource.value && v) {\n      store.value.reactive.axesSettings.axisX.order = {\n        source: xSource.value,\n        options: v,\n      };\n    }\n  },\n});\nconst axisOrderY = computed({\n  get: () => {\n    if (!discreteY.value || !ySource.value) {\n      return null;\n    }\n    const savedOrder = store.value.reactive.axesSettings.axisY.order;\n    const entryY = store.value.uniqueValuesData.value[ySource.value];\n    return savedOrder?.source === ySource.value ? savedOrder.options : (entryY?.overflow ? undefined : entryY?.options);\n  },\n  set: (v) => {\n    if (ySource.value && v) {\n      store.value.reactive.axesSettings.axisY.order = {\n        source: ySource.value,\n        options: v,\n      };\n    }\n  },\n});\nconst xLabelsRotation = computed({\n  get() {\n    return settings.axisX.labelsRotation ?? 'center';\n  },\n  set(value: LabelsRotation) {\n    settings.axisX.labelsRotation = value;\n  },\n});\nconst yLabelsRotation = computed({\n  get() {\n    return settings.axisY.labelsRotation ?? 'center';\n  },\n  set(value: LabelsRotation) {\n    settings.axisY.labelsRotation = value;\n  },\n});\n</script>\n\n<template>\n  <div class=\"axes-form\" @click=\"(e) => e.stopPropagation()\">\n    <h3 class=\"axes-title\">\n      Axes\n    </h3>\n    <div class=\"axes-settings-list\">\n      <!--      Chart title -->\n      <CollapsableBlock title=\"Title\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup v-model=\"settings.title.mode\" label=\"Title\" :options=\"OPTIONS_AXIS_LABEL_MODE\" :compact=\"true\" />\n        </div>\n        <div v-if=\"settings.title.mode === 'custom'\" class=\"axes-settings-input\">\n          <PlTextField v-model=\"settings.title.value\" label=\"Chart title\" placeholder=\"Chart title\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Alignment</span>\n          <BtnIconGroup v-model=\"settings.title.position\" :options=\"OPTIONS_TITLE_ALIGN\" />\n        </div>\n        <!--              <div class=\"axes-settings-options-row\">-->\n        <!--                <span>Facet frame style</span>-->\n        <!--                <btn-icon-group :options=\"OPTIONS_FACET_FRAME\" v-model=\"settings.title.facetTitleFrame\"/>-->\n        <!--              </div>-->\n      </CollapsableBlock>\n      <!--      X axis settings-->\n      <CollapsableBlock title=\"X-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup v-model=\"settings.axisX.titleMode\" label=\"Title\" :options=\"OPTIONS_AXIS_LABEL_MODE\" :compact=\"true\" />\n        </div>\n        <div v-if=\"settings.axisX.titleMode === 'custom'\">\n          <PlTextField v-model=\"settings.axisX.customTitle\" label=\"Text\" placeholder=\"Type\" />\n        </div>\n        <div v-if=\"!discreteX\" class=\"axes-settings-options-row block\">\n          <PlBtnGroup v-model=\"settings.axisX.scale\" label=\"Scale\" :options=\"OPTIONS_SCALE\" :compact=\"true\" />\n        </div>\n        <div v-if=\"discreteX && axisOrderX\" class=\"axes-settings-options-row\">\n          <span>X axis order: </span>\n          <AesButton :data=\"{ type: 'data', value: null }\" @click=\"reorderX = true\" />\n          <template v-if=\"reorderX\">\n            <FormWrapper title=\"Reorder X axis values\" back-title=\"Axes Settings\" @form:close=\"reorderX = false\">\n              <ReorderForm v-model=\"axisOrderX\" />\n            </FormWrapper>\n          </template>\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.axisX.hideAxisLabels\">Hide axis labels</PlCheckbox>\n        </div>\n        <div v-if=\"discreteX\" class=\"axes-settings-options-row\">\n          <span>Labels rotation</span>\n          <BtnIconGroup v-model=\"xLabelsRotation\" :options=\"OPTIONS_LABELS_ROTATION\" />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Gridlines</span>\n          <PlToggleSwitch v-model=\"settings.axisX.gridlines\" />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Ticks</span>\n          <PlToggleSwitch v-model=\"settings.axisX.ticks\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Significant lines style</span>\n          <AesButton\n            :data=\"{ type: 'lineType', value: significantLineStyleX } as AesButtonProps['data']\"\n            @click=\"openLinesPopupX = !openLinesPopupX\" @ref=\"(el: Element) => (linesAesButtonXRef = el)\"\n          />\n          <Popup\n            v-if=\"openLinesPopupX\" :height=\"linesPopupHeight\" :targetRef=\"linesAesButtonXRef\"\n            @popup:close=\"openLinesPopupX = false\"\n          >\n            <div class=\"fixed-aes-list fixed-aes-list__rows\">\n              <FixedLineTypeList\n                v-model=\"significantLineStyleX\"\n                @update:modelValue=\"(value: LineType) => settings.axisX.significantLinesStyle = value\"\n              />\n            </div>\n          </Popup>\n        </div>\n      </CollapsableBlock>\n      <!--      Y axis settings-->\n      <CollapsableBlock title=\"Y-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup v-model=\"settings.axisY.titleMode\" label=\"Title\" :options=\"OPTIONS_AXIS_LABEL_MODE\" :compact=\"true\" />\n        </div>\n        <div v-if=\"settings.axisY.titleMode === 'custom'\">\n          <PlTextField v-model=\"settings.axisY.customTitle\" label=\"Text\" placeholder=\"Type\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.axisY.hideAxisLabels\">Hide axis labels</PlCheckbox>\n        </div>\n        <div v-if=\"!discreteY\" class=\"axes-settings-options-row block\">\n          <PlBtnGroup v-model=\"settings.axisY.scale\" label=\"Scale\" :options=\"OPTIONS_SCALE\" :compact=\"true\" />\n        </div>\n        <div v-if=\"discreteY && axisOrderY\" class=\"axes-settings-options-row\">\n          <span>Y axis order: </span>\n          <AesButton :data=\"{ type: 'data', value: null }\" @click=\"reorderY = true\" />\n          <template v-if=\"reorderY\">\n            <FormWrapper title=\"Reorder Y axis values\" back-title=\"Axes Settings\" @form:close=\"reorderY = false\">\n              <ReorderForm v-model=\"axisOrderY\" />\n            </FormWrapper>\n          </template>\n        </div>\n        <div v-if=\"discreteY\" class=\"axes-settings-options-row\">\n          <span>Labels rotation</span>\n          <BtnIconGroup v-model=\"yLabelsRotation\" :options=\"OPTIONS_LABELS_ROTATION\" />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Gridlines</span>\n          <PlToggleSwitch v-model=\"settings.axisY.gridlines\" />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Ticks</span>\n          <PlToggleSwitch v-model=\"settings.axisY.ticks\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Significant lines style</span>\n          <AesButton\n            :data=\"{ type: 'lineType', value: significantLineStyleY } as AesButtonProps['data']\"\n            @click=\"openLinesPopupY = !openLinesPopupY\" @ref=\"(el: Element) => (linesAesButtonYRef = el)\"\n          />\n          <Popup\n            v-if=\"openLinesPopupY\" :height=\"linesPopupHeight\" :targetRef=\"linesAesButtonYRef\"\n            @popup:close=\"openLinesPopupY = false\"\n          >\n            <div class=\"fixed-aes-list fixed-aes-list__rows\">\n              <FixedLineTypeList\n                v-model=\"significantLineStyleY\"\n                @update:modelValue=\"(value: LineType) => settings.axisY.significantLinesStyle = value\"\n              />\n            </div>\n          </Popup>\n        </div>\n      </CollapsableBlock>\n      <!--      Facet settings-->\n      <div class=\"other\">\n        <div class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.other.showLegend\">Show legend</PlCheckbox>\n        </div>\n        <div class=\"axes-settings-options-row\" >\n          <PlTextField v-model=\"settings.other.nullValueLabel\" label=\"Null value label\" placeholder=\"NA\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlNumberField\n            v-model=\"settings.other.maxGroupCount\"\n            label=\"Max groups count\"\n            :min=\"1\"\n            :max=\"MAX_GROUPS_COUNT\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlNumberField\n            v-model=\"settings.other.maxFacetsCount\"\n            label=\"Max facets count\"\n            :min=\"1\"\n            :max=\"MAX_FACETS_COUNT\"\n          />\n        </div>\n        <div v-if=\"chartType === 'scatterplot'\" class=\"axes-settings-options-row\">\n          <span>Frame</span>\n          <BtnIconGroup v-model=\"settings.other.frame\" :options=\"OPTIONS_CHART_FRAME\" />\n        </div>\n        <div v-if=\"chartType === 'scatterplot'\" class=\"axes-settings-options-row\">\n          <Slider\n            v-model=\"settings.other.facetColumns\" :style=\"{ width: '100%' }\" label=\"Facet column count\" :min=\"1\" :max=\"6\" :step=\"1\"\n            :breakpoints=\"true\" mode=\"input\"\n          />\n        </div>\n        <div v-if=\"chartType === 'scatterplot'\" class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.other.facetSharedBy\" label=\"Facet shared by\"\n            :options=\"OPTIONS_FACET_SHARED\"\n            :compact=\"true\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}