@milaboratories/graph-maker 1.2.5 → 1.2.7

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

@@ -1,5 +1,438 @@
-import f from "./DiscreteAxesSettingsForm.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=DiscreteAxesSettingsForm.vue2.js.map
+import { createDefaultMapping as e } from "../../dataBindAes.js";
+import { MAX_FACETS_COUNT as t, MAX_GROUPS_COUNT as n } from "../../constantsCommon.js";
+import { getDiscreteLabelsRotation as r } from "../../utils/createChartSettingsForRender/getAxesDataFromForms.js";
+import i from "../../components/CollapsableBlock.js";
+import a from "../../icons/Right.js";
+import o from "../../icons/Down.js";
+import s from "../../components/BtnIconGroup.js";
+import ee from "../../icons/AlignLeft.js";
+import te from "../../icons/AlignCenter.js";
+import ne from "../../icons/AlignRight.js";
+import re from "../../icons/FrameFull.js";
+import ie from "../../icons/FrameEmpty.js";
+import ae from "../../icons/Rotation0.js";
+import oe from "../../icons/Rotation45.js";
+import se from "../../icons/Rotation90.js";
+import ce from "../../icons/FrameLeft.js";
+import le from "../../icons/FrameBottom.js";
+import ue from "../../icons/FrameLeftBottom.js";
+import c from "../../components/AesButton.js";
+import l from "../../components/AesSettings/FormWrapper.js";
+import u from "../../components/AesSettings/AesDataMappingDiscrete.js";
+import { useStore as de } from "../../store.js";
+import { computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as fe, onMounted as pe, openBlock as v, ref as y, unref as b, watch as x, withCtx as S } from "vue";
+import { PlBtnGroup as C, PlCheckbox as w, PlNumberField as T, PlTextField as E, PlToggleSwitch as D, Slider as me } from "@platforma-sdk/ui-vue";
+var he = { class: "axes-settings-list" }, ge = { class: "axes-settings-options-row block" }, _e = {
+	key: 0,
+	class: "axes-settings-input"
+}, ve = { class: "axes-settings-options-row" }, ye = {
+	key: 0,
+	class: "axes-settings-options-row"
+}, be = {
+	key: 1,
+	class: "axes-settings-options-row"
+}, xe = {
+	key: 2,
+	class: "axes-settings-options-row"
+}, Se = {
+	key: 3,
+	class: "axes-settings-options-row"
+}, O = { class: "axes-settings-options-row" }, k = {
+	key: 4,
+	class: "axes-settings-options-row"
+}, A = { class: "axes-settings-options-row block" }, j = { key: 5 }, Ce = { class: "axes-settings-options-row table" }, we = { class: "axes-settings-options-row table" }, Te = { class: "axes-settings-options-row table" }, Ee = { class: "axes-settings-options-row block" }, De = { key: 0 }, Oe = { class: "axes-settings-options-row" }, ke = { class: "axes-settings-options-row block" }, Ae = { class: "axes-settings-options-row table" }, je = { class: "axes-settings-options-row table" }, Me = { class: "other" }, Ne = { class: "axes-settings-options-row" }, Pe = { class: "axes-settings-options-row" }, Fe = { class: "axes-settings-options-row" }, Ie = { class: "axes-settings-options-row" }, Le = { class: "axes-settings-options-row" }, Re = { class: "axes-settings-options-row" }, ze = { class: "axes-settings-options-row" }, M = { class: "axes-settings-options-row block" }, N = /* @__PURE__ */ fe({
+	__name: "DiscreteAxesSettingsForm",
+	setup(fe) {
+		let N = de(), P = N.value.reactive.axesSettings, F = {
+			height: 40,
+			horizontalPadding: 12,
+			defaultState: "open",
+			contentPadding: "0 24px"
+		}, Be = [
+			{
+				value: "left",
+				icon: ee
+			},
+			{
+				value: "center",
+				icon: te
+			},
+			{
+				value: "right",
+				icon: ne
+			}
+		], Ve = [
+			{
+				value: "center",
+				icon: ae
+			},
+			{
+				value: "45deg",
+				icon: oe
+			},
+			{
+				value: "90deg",
+				icon: se
+			}
+		], I = [
+			{
+				value: "auto",
+				text: "Auto"
+			},
+			{
+				value: "custom",
+				text: "Custom"
+			},
+			{
+				value: "hidden",
+				text: "Hidden"
+			}
+		], He = [{
+			value: "linear",
+			text: "Linear"
+		}, {
+			value: "log",
+			text: "Log"
+		}], Ue = [
+			{
+				value: "empty",
+				icon: ie
+			},
+			{
+				value: "left",
+				icon: ce
+			},
+			{
+				value: "bottom",
+				icon: le
+			},
+			{
+				value: "left-bottom",
+				icon: ue
+			},
+			{
+				value: "full",
+				icon: re
+			}
+		], L = d(() => N.value.inputGuide.value), R = d(() => N.value.uniqueValuesData.value), z = y(!1), B = y(!1), V = d(() => N.value.reactive.tabDefaultState.axes.reorderPrimaryOpen), H = d(() => N.value.reactive.tabDefaultState.axes.reorderSecondaryOpen);
+		pe(() => {
+			V.value && (z.value = !0), H.value && (B.value = !0);
+		}), x(() => V.value, (e) => {
+			e && (B.value = !1, z.value = !0);
+		}), x(() => H.value, (e) => {
+			e && (z.value = !1, B.value = !0);
+		});
+		let U = d(() => N.value.reactive.optionsState.components.primaryGrouping?.selectorStates[0]?.selectedSource), W = d(() => N.value.reactive.optionsState.components.secondaryGrouping?.selectorStates[0]?.selectedSource), G = d(() => N.value.commonHelpersData.primaryGroups.value), K = d(() => N.value.commonHelpersData.secondaryGroups.value), q = d(() => N.value.commonHelpersData.usedAesInMapping.value), J = y(N.value.reactive.dataBindAes[U.value] ?? e(G.value, N.value.defaultPalette.categorical)), Y = y(N.value.reactive.dataBindAes[W.value] ?? e(K.value, N.value.defaultPalette.categorical)), X = d(() => {
+			if (U.value) {
+				let e = L.value.getSourceInfo(U.value) ?? null, t = R.value[U.value], n = t?.overflow ? null : t?.labels ?? null;
+				return {
+					selectedSourceInfo: e,
+					labels: G.value.reduce((e, t) => (e[t] = n?.[t] ?? String(t), e[t] === "null" && (e[t] = N.value.reactive.axesSettings.other.nullValueLabel), e), {})
+				};
+			}
+			return null;
+		}), Z = d(() => {
+			if (W.value) {
+				let e = L.value.getSourceInfo(W.value) ?? null, t = R.value[W.value], n = t?.overflow ? null : t?.labels ?? null;
+				return {
+					selectedSourceInfo: e,
+					labels: K.value.reduce((e, t) => (e[t] = n?.[t] ?? String(t), e[t] === "null" && (e[t] = N.value.reactive.axesSettings.other.nullValueLabel), e), {})
+				};
+			}
+			return null;
+		});
+		function Q(e, t) {
+			N.value.reactive.dataBindAes[t] = e;
+		}
+		let We = [
+			{
+				text: "X",
+				value: "x"
+			},
+			{
+				text: "Y",
+				value: "y"
+			},
+			{
+				text: "XY",
+				value: "xy"
+			},
+			{
+				text: "None",
+				value: "none"
+			}
+		], Ge = d(() => {
+			let e = R.value[U.value];
+			return e?.overflow ? null : e;
+		}), $ = d({
+			get() {
+				return r(P.axisX.labelsRotation, Ge.value?.options);
+			},
+			set(e) {
+				P.axisX.labelsRotation = e;
+			}
+		});
+		return (e, r) => (v(), m("div", {
+			class: "axes-form",
+			onClick: r[36] ||= (e) => e.stopPropagation()
+		}, [r[53] ||= h("h3", { class: "axes-title" }, " Axes ", -1), h("div", he, [
+			_(i, {
+				title: "Title",
+				settings: F,
+				icon: a,
+				"icon-open": o
+			}, {
+				default: S(() => [
+					h("div", ge, [_(b(C), {
+						modelValue: b(P).title.mode,
+						"onUpdate:modelValue": r[0] ||= (e) => b(P).title.mode = e,
+						label: "Title",
+						options: I,
+						compact: !0
+					}, null, 8, ["modelValue"])]),
+					b(P).title.mode === "custom" ? (v(), m("div", _e, [_(b(E), {
+						modelValue: b(P).title.value,
+						"onUpdate:modelValue": r[1] ||= (e) => b(P).title.value = e,
+						label: "Chart title",
+						placeholder: "Chart title"
+					}, null, 8, ["modelValue"])])) : p("", !0),
+					h("div", ve, [r[37] ||= h("span", null, "Alignment", -1), _(s, {
+						modelValue: b(P).title.position,
+						"onUpdate:modelValue": r[2] ||= (e) => b(P).title.position = e,
+						options: Be
+					}, null, 8, ["modelValue"])])
+				]),
+				_: 1
+			}),
+			_(i, {
+				title: "X-axis",
+				settings: F,
+				icon: a,
+				"icon-open": o
+			}, {
+				default: S(() => [
+					G.value.length > 1 ? (v(), m("div", ye, [
+						r[38] ||= h("span", null, "Primary groups order: ", -1),
+						_(c, {
+							data: {
+								type: "data",
+								value: null
+							},
+							onClick: r[3] ||= (e) => z.value = !0
+						}),
+						z.value && X.value ? (v(), f(l, {
+							key: 0,
+							title: "Reorder primary groups",
+							"back-title": "Axes Settings",
+							"onForm:open": r[6] ||= (e) => b(N).reactive.tabDefaultState.axes.reorderPrimaryOpen = !1,
+							"onForm:close": r[7] ||= (e) => z.value = !1
+						}, {
+							default: S(() => [_(u, {
+								modelValue: J.value,
+								"onUpdate:modelValue": [r[4] ||= (e) => J.value = e, r[5] ||= (e) => Q(e, U.value)],
+								"column-value-labels": X.value.labels,
+								"data-column-label": X.value.selectedSourceInfo?.label ?? "",
+								"used-aes-in-mapping": q.value[U.value],
+								"allow-reordering": "",
+								"allow-hiding": "",
+								"allow-null-option": b(P).axisX.allowNullPrimaryGroups
+							}, null, 8, [
+								"modelValue",
+								"column-value-labels",
+								"data-column-label",
+								"used-aes-in-mapping",
+								"allow-null-option"
+							])]),
+							_: 1
+						})) : p("", !0)
+					])) : p("", !0),
+					G.value.length > 1 ? (v(), m("div", be, [r[39] ||= h("span", null, "Allow null primary group", -1), _(b(D), {
+						modelValue: b(P).axisX.allowNullPrimaryGroups,
+						"onUpdate:modelValue": r[8] ||= (e) => b(P).axisX.allowNullPrimaryGroups = e
+					}, null, 8, ["modelValue"])])) : p("", !0),
+					K.value.length > 1 ? (v(), m("div", xe, [
+						r[40] ||= h("span", null, "Secondary groups order: ", -1),
+						_(c, {
+							data: {
+								type: "data",
+								value: null
+							},
+							onClick: r[9] ||= (e) => B.value = !0
+						}),
+						B.value && Z.value ? (v(), f(l, {
+							key: 0,
+							title: "Reorder secondary groups",
+							"back-title": "Axes Settings",
+							"onForm:open": r[12] ||= (e) => b(N).reactive.tabDefaultState.axes.reorderSecondaryOpen = !1,
+							"onForm:close": r[13] ||= (e) => B.value = !1
+						}, {
+							default: S(() => [_(u, {
+								modelValue: Y.value,
+								"onUpdate:modelValue": [r[10] ||= (e) => Y.value = e, r[11] ||= (e) => Q(e, W.value)],
+								"column-value-labels": Z.value.labels,
+								"data-column-label": Z.value.selectedSourceInfo?.label ?? "",
+								"used-aes-in-mapping": q.value[W.value],
+								"allow-reordering": "",
+								"allow-hiding": "",
+								"allow-null-option": b(P).axisX.allowNullSecondaryGroups
+							}, null, 8, [
+								"modelValue",
+								"column-value-labels",
+								"data-column-label",
+								"used-aes-in-mapping",
+								"allow-null-option"
+							])]),
+							_: 1
+						})) : p("", !0)
+					])) : p("", !0),
+					K.value.length > 1 ? (v(), m("div", Se, [r[41] ||= h("span", null, "Allow null secondary group", -1), _(b(D), {
+						modelValue: b(P).axisX.allowNullSecondaryGroups,
+						"onUpdate:modelValue": r[14] ||= (e) => b(P).axisX.allowNullSecondaryGroups = e
+					}, null, 8, ["modelValue"])])) : p("", !0),
+					h("div", O, [_(b(w), {
+						modelValue: b(P).axisX.hideAxisLabels,
+						"onUpdate:modelValue": r[15] ||= (e) => b(P).axisX.hideAxisLabels = e
+					}, {
+						default: S(() => [...r[42] ||= [g("Hide axis labels", -1)]]),
+						_: 1
+					}, 8, ["modelValue"])]),
+					b(P).axisX.hideAxisLabels ? p("", !0) : (v(), m("div", k, [r[43] ||= h("span", null, "Labels rotation", -1), _(s, {
+						modelValue: $.value,
+						"onUpdate:modelValue": r[16] ||= (e) => $.value = e,
+						options: Ve
+					}, null, 8, ["modelValue"])])),
+					h("div", A, [_(b(C), {
+						modelValue: b(P).axisX.titleMode,
+						"onUpdate:modelValue": r[17] ||= (e) => b(P).axisX.titleMode = e,
+						label: "Title",
+						options: I,
+						compact: !0
+					}, null, 8, ["modelValue"])]),
+					b(P).axisX.titleMode === "custom" ? (v(), m("div", j, [_(b(E), {
+						modelValue: b(P).axisX.customTitle,
+						"onUpdate:modelValue": r[18] ||= (e) => b(P).axisX.customTitle = e,
+						label: "Text",
+						placeholder: "Type"
+					}, null, 8, ["modelValue"])])) : p("", !0),
+					h("div", Ce, [r[44] ||= h("span", null, "Gridlines", -1), _(b(D), {
+						modelValue: b(P).axisX.gridlines,
+						"onUpdate:modelValue": r[19] ||= (e) => b(P).axisX.gridlines = e
+					}, null, 8, ["modelValue"])]),
+					h("div", we, [r[45] ||= h("span", null, "Lines between categories", -1), _(b(D), {
+						modelValue: b(P).axisX.linesBetweenCategories,
+						"onUpdate:modelValue": r[20] ||= (e) => b(P).axisX.linesBetweenCategories = e
+					}, null, 8, ["modelValue"])]),
+					h("div", Te, [r[46] ||= h("span", null, "Ticks", -1), _(b(D), {
+						modelValue: b(P).axisX.ticks,
+						"onUpdate:modelValue": r[21] ||= (e) => b(P).axisX.ticks = e
+					}, null, 8, ["modelValue"])])
+				]),
+				_: 1
+			}),
+			_(i, {
+				title: "Y-axis",
+				settings: F,
+				icon: a,
+				"icon-open": o
+			}, {
+				default: S(() => [
+					h("div", Ee, [_(b(C), {
+						modelValue: b(P).axisY.titleMode,
+						"onUpdate:modelValue": r[22] ||= (e) => b(P).axisY.titleMode = e,
+						label: "Title",
+						options: I,
+						compact: !0
+					}, null, 8, ["modelValue"])]),
+					b(P).axisY.titleMode === "custom" ? (v(), m("div", De, [_(b(E), {
+						modelValue: b(P).axisY.customTitle,
+						"onUpdate:modelValue": r[23] ||= (e) => b(P).axisY.customTitle = e,
+						label: "Text",
+						placeholder: "Type"
+					}, null, 8, ["modelValue"])])) : p("", !0),
+					h("div", Oe, [_(b(w), {
+						modelValue: b(P).axisY.hideAxisLabels,
+						"onUpdate:modelValue": r[24] ||= (e) => b(P).axisY.hideAxisLabels = e
+					}, {
+						default: S(() => [...r[47] ||= [g("Hide axis labels", -1)]]),
+						_: 1
+					}, 8, ["modelValue"])]),
+					h("div", ke, [_(b(C), {
+						modelValue: b(P).axisY.scale,
+						"onUpdate:modelValue": r[25] ||= (e) => b(P).axisY.scale = e,
+						label: "Scale",
+						options: He,
+						compact: !0
+					}, null, 8, ["modelValue"])]),
+					h("div", Ae, [r[48] ||= h("span", null, "Gridlines", -1), _(b(D), {
+						modelValue: b(P).axisY.gridlines,
+						"onUpdate:modelValue": r[26] ||= (e) => b(P).axisY.gridlines = e
+					}, null, 8, ["modelValue"])]),
+					h("div", je, [r[49] ||= h("span", null, "Ticks", -1), _(b(D), {
+						modelValue: b(P).axisY.ticks,
+						"onUpdate:modelValue": r[27] ||= (e) => b(P).axisY.ticks = e
+					}, null, 8, ["modelValue"])])
+				]),
+				_: 1
+			}),
+			h("div", Me, [
+				h("div", Ne, [_(b(w), {
+					modelValue: b(P).other.showLegend,
+					"onUpdate:modelValue": r[28] ||= (e) => b(P).other.showLegend = e
+				}, {
+					default: S(() => [...r[50] ||= [g("Show legend", -1)]]),
+					_: 1
+				}, 8, ["modelValue"])]),
+				h("div", Pe, [_(b(E), {
+					modelValue: b(P).other.nullValueLabel,
+					"onUpdate:modelValue": r[29] ||= (e) => b(P).other.nullValueLabel = e,
+					label: "Null value label",
+					placeholder: "NA"
+				}, null, 8, ["modelValue"])]),
+				h("div", Fe, [_(b(T), {
+					modelValue: b(P).other.maxGroupCount,
+					"onUpdate:modelValue": r[30] ||= (e) => b(P).other.maxGroupCount = e,
+					label: "Max groups count",
+					min: 2,
+					max: b(n)
+				}, null, 8, ["modelValue", "max"])]),
+				h("div", Ie, [_(b(T), {
+					modelValue: b(P).other.maxFacetsCount,
+					"onUpdate:modelValue": r[31] ||= (e) => b(P).other.maxFacetsCount = e,
+					label: "Max facets count",
+					min: 1,
+					max: b(t)
+				}, null, 8, ["modelValue", "max"])]),
+				h("div", Le, [r[51] ||= h("span", null, "Frame", -1), _(s, {
+					modelValue: b(P).other.frame,
+					"onUpdate:modelValue": r[32] ||= (e) => b(P).other.frame = e,
+					options: Ue
+				}, null, 8, ["modelValue"])]),
+				h("div", Re, [r[52] ||= h("span", null, "Reverse axes", -1), _(b(D), {
+					modelValue: b(P).other.reverse,
+					"onUpdate:modelValue": r[33] ||= (e) => b(P).other.reverse = e
+				}, null, 8, ["modelValue"])]),
+				h("div", ze, [_(b(me), {
+					modelValue: b(P).other.facetColumns,
+					"onUpdate:modelValue": r[34] ||= (e) => b(P).other.facetColumns = e,
+					style: { width: "100%" },
+					label: "Facet column count",
+					min: 1,
+					max: 6,
+					step: 1,
+					breakpoints: !0,
+					mode: "input"
+				}, null, 8, ["modelValue"])]),
+				h("div", M, [_(b(C), {
+					modelValue: b(P).other.facetSharedBy,
+					"onUpdate:modelValue": r[35] ||= (e) => b(P).other.facetSharedBy = e,
+					label: "Facet shared by",
+					options: We,
+					compact: !0
+				}, null, 8, ["modelValue"])])
+			])
+		])]));
+	}
+});
+export { N as default };
+
+//# sourceMappingURL=DiscreteAxesSettingsForm.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DiscreteAxesSettingsForm.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"DiscreteAxesSettingsForm.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/forms/AxesSettingsForm/DiscreteAxesSettingsForm.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 Rotation0 from '../../icons/Rotation0.vue';\nimport Rotation45 from '../../icons/Rotation45.vue';\nimport Rotation90 from '../../icons/Rotation90.vue';\nimport FrameLeft from '../../icons/FrameLeft.vue';\nimport FrameBottom from '../../icons/FrameBottom.vue';\nimport FrameLeftBottom from '../../icons/FrameLeftBottom.vue';\nimport AesButton from '../../components/AesButton.vue';\nimport FormWrapper from '../../components/AesSettings/FormWrapper.vue';\nimport { computed, onMounted, ref } from 'vue';\nimport AesDataMapping from '../../components/AesSettings/AesDataMappingDiscrete.vue';\nimport type { AestheticMappingCategorical } from '../../dataBindAes';\nimport { createDefaultMapping } from '../../dataBindAes';\nimport type { LabelsRotation } from '../../types';\nimport { getDiscreteLabelsRotation } from '../../utils';\nimport { watch } from 'vue';\nimport { MAX_FACETS_COUNT, MAX_GROUPS_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];\n// const OPTIONS_FACET_FRAME = [\n//   {value: 'empty', icon: FrameEmpty},\n//   {value: 'full', icon: FrameFull},\n// ]\nconst OPTIONS_LABELS_ROTATION = [\n  { value: 'center', icon: Rotation0 },\n  { value: '45deg', icon: Rotation45 },\n  { value: '90deg', icon: Rotation90 },\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];\n\nconst inputGuide = computed(() => store.value.inputGuide.value);\nconst labelsInfo = computed(() => store.value.uniqueValuesData.value);\n\nconst reorderPrimaryOpen = ref(false);\nconst reorderSecondaryOpen = ref(false);\n\nconst defaultReorderPrimaryOpen = computed(() => store.value.reactive.tabDefaultState['axes'].reorderPrimaryOpen);\nconst defaultReorderSecondaryOpen = computed(() => store.value.reactive.tabDefaultState['axes'].reorderSecondaryOpen);\nonMounted(() => {\n  if (defaultReorderPrimaryOpen.value) {\n    reorderPrimaryOpen.value = true;\n  }\n  if (defaultReorderSecondaryOpen.value) {\n    reorderSecondaryOpen.value = true;\n  }\n});\nwatch(() => defaultReorderPrimaryOpen.value, (v) => {\n  if (v) {\n    reorderSecondaryOpen.value = false;\n    reorderPrimaryOpen.value = true;\n  }\n});\nwatch(() => defaultReorderSecondaryOpen.value, (v) => {\n  if (v) {\n    reorderPrimaryOpen.value = false;\n    reorderSecondaryOpen.value = true;\n  }\n});\n\nconst primaryGrouping = computed(() => store.value.reactive.optionsState.components.primaryGrouping?.selectorStates[0]?.selectedSource);\nconst secondaryGrouping = computed(() => store.value.reactive.optionsState.components.secondaryGrouping?.selectorStates[0]?.selectedSource);\n\nconst primaryGroups = computed(() => store.value.commonHelpersData.primaryGroups.value);\nconst secondaryGroups = computed(() => store.value.commonHelpersData.secondaryGroups.value);\n\nconst usedAesInMapping = computed(() => store.value.commonHelpersData.usedAesInMapping.value);\n\nconst mappingPrimary = ref(store.value.reactive.dataBindAes[primaryGrouping.value] as AestheticMappingCategorical ?? createDefaultMapping(primaryGroups.value, store.value.defaultPalette.categorical));\nconst mappingSecondary = ref(store.value.reactive.dataBindAes[secondaryGrouping.value] as AestheticMappingCategorical ?? createDefaultMapping(secondaryGroups.value, store.value.defaultPalette.categorical));\n\nconst primaryInfo = computed(() => {\n  if (primaryGrouping.value) {\n    const selectedSourceInfo = inputGuide.value.getSourceInfo(primaryGrouping.value) ?? null;\n    const entry = labelsInfo.value[primaryGrouping.value];\n    const valueLabels = entry?.overflow ? null : (entry?.labels ?? null);\n    return {\n      selectedSourceInfo,\n      labels: primaryGroups.value.reduce((res: Record<string, string>, v) => {\n        res[v] = valueLabels?.[v] ?? String(v);\n        if (res[v] === 'null') {\n          res[v] = store.value.reactive.axesSettings.other.nullValueLabel;\n        }\n        return res;\n      }, {}),\n    };\n  }\n  return null;\n});\nconst secondaryInfo = computed(() => {\n  if (secondaryGrouping.value) {\n    const selectedSourceInfo = inputGuide.value.getSourceInfo(secondaryGrouping.value) ?? null;\n    const entry = labelsInfo.value[secondaryGrouping.value];\n    const valueLabels = entry?.overflow ? null : (entry?.labels ?? null);\n    return {\n      selectedSourceInfo,\n      labels: secondaryGroups.value.reduce((res: Record<string, string>, v) => {\n        res[v] = valueLabels?.[v] ?? String(v);\n        if (res[v] === 'null') {\n          res[v] = store.value.reactive.axesSettings.other.nullValueLabel;\n        }\n        return res;\n      }, {}),\n    };\n  }\n  return null;\n});\n\nfunction updateOrder(value: AestheticMappingCategorical, sourceId: string) {\n  store.value.reactive.dataBindAes[sourceId] = value;\n}\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\nconst primaryOptions = computed(() => {\n  const entry = labelsInfo.value[primaryGrouping.value];\n  return entry?.overflow ? null : entry;\n});\nconst xLabelsRotation = computed({\n  get() {\n    return getDiscreteLabelsRotation(settings.axisX.labelsRotation, primaryOptions.value?.options);\n  },\n  set(value: LabelsRotation) {\n    settings.axisX.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\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        <!--          <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 v-if=\"primaryGroups.length > 1\" class=\"axes-settings-options-row\">\n          <span>Primary groups order: </span>\n          <AesButton :data=\"{type: 'data', value: null}\" @click=\"reorderPrimaryOpen = true\" />\n          <template v-if=\"reorderPrimaryOpen && primaryInfo\">\n            <FormWrapper\n              title=\"Reorder primary groups\"\n              back-title=\"Axes Settings\"\n              @form:open=\"store.reactive.tabDefaultState['axes'].reorderPrimaryOpen = false\"\n              @form:close=\"reorderPrimaryOpen = false\"\n            >\n              <AesDataMapping\n                v-model=\"mappingPrimary\"\n                :column-value-labels=\"primaryInfo.labels\"\n                :data-column-label=\"primaryInfo.selectedSourceInfo?.label ?? ''\"\n                :used-aes-in-mapping=\"usedAesInMapping[primaryGrouping]\"\n                allow-reordering\n                allow-hiding\n                :allow-null-option=\"settings.axisX.allowNullPrimaryGroups\"\n                @update:modelValue=\"(value:AestheticMappingCategorical) => updateOrder(value, primaryGrouping)\"\n              />\n            </FormWrapper>\n          </template>\n        </div>\n        <div v-if=\"primaryGroups.length > 1\" class=\"axes-settings-options-row\">\n          <span>Allow null primary group</span>\n          <PlToggleSwitch v-model=\"settings.axisX.allowNullPrimaryGroups\" />\n        </div>\n        <div v-if=\"secondaryGroups.length > 1\" class=\"axes-settings-options-row\">\n          <span>Secondary groups order: </span>\n          <AesButton :data=\"{type: 'data', value: null}\" @click=\"reorderSecondaryOpen = true\" />\n          <template v-if=\"reorderSecondaryOpen && secondaryInfo\">\n            <FormWrapper\n              title=\"Reorder secondary groups\"\n              back-title=\"Axes Settings\"\n              @form:open=\"store.reactive.tabDefaultState['axes'].reorderSecondaryOpen = false\"\n              @form:close=\"reorderSecondaryOpen = false\"\n            >\n              <AesDataMapping\n                v-model=\"mappingSecondary\"\n                :column-value-labels=\"secondaryInfo.labels\"\n                :data-column-label=\"secondaryInfo.selectedSourceInfo?.label ?? ''\"\n                :used-aes-in-mapping=\"usedAesInMapping[secondaryGrouping]\"\n                allow-reordering\n                allow-hiding\n                :allow-null-option=\"settings.axisX.allowNullSecondaryGroups\"\n                @update:modelValue=\"(value:AestheticMappingCategorical) => updateOrder(value, secondaryGrouping)\"\n              />\n            </FormWrapper>\n          </template>\n        </div>\n        <div v-if=\"secondaryGroups.length > 1\" class=\"axes-settings-options-row\">\n          <span>Allow null secondary group</span>\n          <PlToggleSwitch v-model=\"settings.axisX.allowNullSecondaryGroups\" />\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=\"!settings.axisX.hideAxisLabels\" 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 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 table\">\n          <span>Gridlines</span>\n          <PlToggleSwitch v-model=\"settings.axisX.gridlines\" />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Lines between categories</span>\n          <PlToggleSwitch v-model=\"settings.axisX.linesBetweenCategories\" />\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.titleMode\"\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            :compact=\"true\"\n          />\n        </div>\n        <div v-if=\"settings.axisY.titleMode === 'custom'\">\n          <PlTextField\n            v-model=\"settings.axisY.customTitle\"\n            label=\"Text\"\n            placeholder=\"Type\"\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 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 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.maxGroupCount\"\n            label=\"Max groups count\"\n            :min=\"2\"\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 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          <span>Reverse axes</span>\n          <PlToggleSwitch v-model=\"settings.other.reverse\" />\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":"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"}

package/dist/forms/AxesSettingsForm/HeatmapAxesSettingsForm.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeatmapAxesSettingsForm.js","names":[],"sources":["../../../src/forms/AxesSettingsForm/HeatmapAxesSettingsForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Slider, PlCheckbox, PlToggleSwitch, 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 Rotation0 from '../../icons/Rotation0.vue';\nimport Rotation45 from '../../icons/Rotation45.vue';\nimport Rotation90 from '../../icons/Rotation90.vue';\n// import FrameLeft from '../../icons/FrameLeft.vue';\n// import FrameBottom from '../../icons/FrameBottom.vue';\n// import FrameLeftBottom from '../../icons/FrameLeftBottom.vue';\nimport { computed } from 'vue';\nimport type { HeatmapUIState } from '@milaboratories/pf-plots';\nimport { MAX_FACETS_COUNT } from '../../constantsCommon';\n\nconst MIN_CELL_SIZE = 4;\nconst MAX_CELL_SIZE = 50;\nconst DEFAULT_CELL_SIZE = 20;\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};\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_HEATMAP_ROTATION = [\n  { value: 0, icon: Rotation0 },\n  { value: 45, icon: Rotation45 },\n  { value: 90, icon: Rotation90 },\n];\nconst OPTIONS_AXIS_LABEL_MODE = [\n  { value: 'auto', text: 'Auto' },\n  { value: 'custom', text: 'Custom' },\n  { value: 'hidden', text: 'Hidden' },\n];\nconst OPTIONS_CHART_FRAME = [\n  { value: 'none', icon: FrameEmpty },\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_SORTING = [\n  { text: 'ascending', value: 'asc' },\n  { text: 'descending', value: 'desc' },\n];\nconst CELL_SIZE_OPTIONS = [\n  { text: 'auto', value: 'auto' },\n  { text: 'custom', value: 'custom' },\n];\n\nconst ANNOTATION_TITLE_OPTIONS_X = [\n  { text: 'left', value: 'left' },\n  { text: 'right', value: 'right' },\n  { text: 'hidden', value: 'hidden' },\n];\nconst ANNOTATION_TITLE_OPTIONS_Y = [\n  { text: 'top', value: 'top' },\n  { text: 'bottom', value: 'bottom' },\n  { text: 'hidden', value: 'hidden' },\n];\n\nconst layer = computed(() => store.value.reactive.layersSettings.heatmapClustered);\nconst optionsFacetShared = computed(() => OPTIONS_FACET_SHARED.filter((option) => {\n  if (store.value.reactive.template !== 'heatmapClustered') {\n    return true;\n  }\n  if (layer.value.dendrogramX && layer.value.dendrogramY) {\n    return option.value !== 'x' && option.value !== 'xy' && option.value !== 'y';\n  }\n  if (layer.value.dendrogramX) {\n    return option.value !== 'x' && option.value !== 'xy';\n  }\n  if (layer.value.dendrogramY) {\n    return option.value !== 'y' && option.value !== 'xy';\n  }\n  return true;\n}));\n\nconst options = computed(() => (store.value.reactive.optionsState.components as HeatmapUIState['components']));\n\nconst cellWidthMode = computed(() => settings.axisX.cellSize === null ? 'auto' : 'custom');\nconst cellWidth = computed({\n  get: () => settings.axisX.cellSize,\n  set: (v) => {\n    settings.axisX.cellSize = v;\n  },\n});\nconst cellHeightMode = computed(() => settings.axisY.cellSize === null ? 'auto' : 'custom');\nconst cellHeight = computed({\n  get: () => settings.axisY.cellSize,\n  set: (v) => {\n    settings.axisY.cellSize = v;\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\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 v-if=\"options.xGroupBy.selectorStates.length\" class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.axisX.hideAxisGroupLabels\">Hide group labels</PlCheckbox>\n        </div>\n        <div v-if=\"!settings.axisX.hideAxisLabels\" class=\"axes-settings-options-row\">\n          <span>Labels rotation</span>\n          <BtnIconGroup v-model=\"settings.axisX.axisLabelsAngle\" :options=\"OPTIONS_HEATMAP_ROTATION\" />\n        </div>\n        <div v-if=\"options.xGroupBy.selectorStates.length && !settings.axisX.hideAxisGroupLabels\" class=\"axes-settings-options-row\">\n          <span>Group labels rotation</span>\n          <BtnIconGroup v-model=\"settings.axisX.groupLabelsAngle\" :options=\"OPTIONS_HEATMAP_ROTATION\" />\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.sorting\"\n            label=\"Sorting\"\n            :options=\"OPTIONS_SORTING\"\n            :compact=\"true\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"cellWidthMode\"\n            label=\"Cell width mode\"\n            :options=\"CELL_SIZE_OPTIONS\"\n            :compact=\"true\"\n            @update:model-value=\"(v) => {\n              cellWidth = v === 'auto' ? null : DEFAULT_CELL_SIZE;\n            }\"\n          />\n        </div>\n        <div v-if=\"cellWidthMode === 'custom' && cellWidth !== null\" class=\"axes-settings-options-row\">\n          <Slider v-model=\"cellWidth\" label=\"Cell width\" :min=\"MIN_CELL_SIZE\" :max=\"MAX_CELL_SIZE\" measure=\"px\" :style=\"{width: '100%'}\"/>\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 block\">\n          <PlBtnGroup\n            v-model=\"settings.axisX.annotationTitlePosition\"\n            label=\"Annotation title position\"\n            :options=\"ANNOTATION_TITLE_OPTIONS_X\"\n            :compact=\"true\"\n          />\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\">\n          <PlCheckbox v-model=\"settings.axisY.hideAxisLabels\">Hide axis labels</PlCheckbox>\n        </div>\n        <div v-if=\"options.yGroupBy.selectorStates.length\" class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.axisY.hideAxisGroupLabels\">Hide group labels</PlCheckbox>\n        </div>\n        <div v-if=\"!settings.axisY.hideAxisLabels\" class=\"axes-settings-options-row\">\n          <span>Labels rotation</span>\n          <BtnIconGroup v-model=\"settings.axisY.axisLabelsAngle\" :options=\"OPTIONS_HEATMAP_ROTATION\" />\n        </div>\n        <div v-if=\"options.yGroupBy.selectorStates.length && !settings.axisY.hideAxisGroupLabels\" class=\"axes-settings-options-row\">\n          <span>Group labels rotation</span>\n          <BtnIconGroup v-model=\"settings.axisY.groupLabelsAngle\" :options=\"OPTIONS_HEATMAP_ROTATION\" />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.axisY.titleMode\"\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            :compact=\"true\"\n          />\n        </div>\n        <div v-if=\"settings.axisY.titleMode === 'custom'\">\n          <PlTextField\n            v-model=\"settings.axisY.customTitle\"\n            label=\"Text\"\n            placeholder=\"Type\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.axisY.sorting\"\n            label=\"Sorting\"\n            :options=\"OPTIONS_SORTING\"\n            :compact=\"true\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"cellHeightMode\"\n            label=\"Cell height mode\"\n            :options=\"CELL_SIZE_OPTIONS\"\n            :compact=\"true\"\n            @update:model-value=\"(v) => {\n              cellHeight = v === 'auto' ? null : DEFAULT_CELL_SIZE;\n            }\"\n          />\n        </div>\n        <div v-if=\"cellHeightMode === 'custom' && cellHeight !== null\" class=\"axes-settings-options-row\">\n          <Slider v-model=\"cellHeight\" label=\"Cell height\" :min=\"MIN_CELL_SIZE\" :max=\"MAX_CELL_SIZE\" measure=\"px\" :style=\"{width: '100%'}\"/>\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 block\">\n          <PlBtnGroup\n            v-model=\"settings.axisY.annotationTitlePosition\"\n            label=\"Annotation title position\"\n            :options=\"ANNOTATION_TITLE_OPTIONS_Y\"\n            :compact=\"true\"\n          />\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=\"1\"\n            :max=\"MAX_FACETS_COUNT\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.other.canvasRenderMode\">Render as canvas</PlCheckbox>\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=\"optionsFacetShared\"\n            :compact=\"true\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}