npm - @milaboratories/graph-maker - Versions diffs - 1.1.166 → 1.1.168 - Mend

@milaboratories/graph-maker 1.1.166 → 1.1.168

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/dist/GraphMaker/forms/AxesSettingsForm/DiscreteAxesSettingsForm.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DiscreteAxesSettingsForm.vue.js","sources":["../../../../src/GraphMaker/forms/AxesSettingsForm/DiscreteAxesSettingsForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Slider, PlToggleSwitch } 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 { AestheticMappingCategorical, createDefaultMapping } from '../../dataBindAes';\nimport { LabelsRotation } from '../../types';\nimport { getDiscreteLabelsRotation } from '../../utils';\nimport { watch } from 'vue';\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};\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: 'Hide' }\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));\nconst mappingSecondary = ref(store.value.reactive.dataBindAes[secondaryGrouping.value] as AestheticMappingCategorical ?? createDefaultMapping(secondaryGroups.value));\n\nconst primaryInfo = computed(() => {\n if (primaryGrouping.value) {\n const selectedSourceInfo = inputGuide.value.getSourceInfo(primaryGrouping.value) ?? null;\n const valueLabels = labelsInfo.value[primaryGrouping.value]?.labels ?? null;\n return {\n selectedSourceInfo,\n labels: primaryGroups.value.reduce((res: Record<string, string>, v) => {\n res[v] = valueLabels?.[v] ?? String(v);\n return res;\n }, {})\n };\n }\n});\nconst secondaryInfo = computed(() => {\n if (secondaryGrouping.value) {\n const selectedSourceInfo = inputGuide.value.getSourceInfo(secondaryGrouping.value) ?? null;\n const valueLabels = labelsInfo.value[secondaryGrouping.value]?.labels ?? null;\n return {\n selectedSourceInfo,\n labels: secondaryGroups.value.reduce((res: Record<string, string>, v) => {\n res[v] = valueLabels?.[v] ?? String(v);\n return res;\n }, {})\n };\n }\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(() => labelsInfo.value[primaryGrouping.value])\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 <collapsable-block title=\"Title\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n <div class=\"axes-settings-options-row block\">\n <pl-btn-group\n label=\"Title\"\n :options=\"OPTIONS_AXIS_LABEL_MODE\"\n v-model=\"settings.title.mode\"\n />\n </div>\n <div class=\"axes-settings-input\" v-if=\"settings.title.mode === 'custom'\">\n <pl-text-field\n label=\"Chart title\"\n placeholder=\"Chart title\"\n v-model=\"settings.title.value\"\n />\n </div>\n <div class=\"axes-settings-options-row\">\n <span>Alignment</span>\n <btn-icon-group :options=\"OPTIONS_TITLE_ALIGN\" v-model=\"settings.title.position\"/>\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 </collapsable-block>\n <!-- X axis settings-->\n <collapsable-block title=\"X-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n <div class=\"axes-settings-options-row\" v-if=\"primaryGroups.length > 1\">\n <span>Primary groups order: </span>\n <aes-button :data=\"{type: 'data', value: null}\" @click=\"reorderPrimaryOpen = true\" />\n <template v-if=\"reorderPrimaryOpen && primaryInfo\">\n <form-wrapper\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 <aes-data-mapping\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 v-model=\"mappingPrimary\"\n @update:modelValue=\"(value:AestheticMappingCategorical) => updateOrder(value, primaryGrouping)\"\n />\n </form-wrapper>\n </template>\n </div>\n <div class=\"axes-settings-options-row\" v-if=\"primaryGroups.length > 1\">\n <span>Allow null primary group</span>\n <pl-toggle-switch v-model=\"settings.axisX.allowNullPrimaryGroups\" />\n </div>\n <div class=\"axes-settings-options-row\" v-if=\"secondaryGroups.length > 1\">\n <span>Secondary groups order: </span>\n <aes-button :data=\"{type: 'data', value: null}\" @click=\"reorderSecondaryOpen = true\" />\n <template v-if=\"reorderSecondaryOpen && secondaryInfo\">\n <form-wrapper\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 <aes-data-mapping\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 v-model=\"mappingSecondary\"\n @update:modelValue=\"(value:AestheticMappingCategorical) => updateOrder(value, secondaryGrouping)\"\n />\n </form-wrapper>\n </template>\n </div>\n <div class=\"axes-settings-options-row\" v-if=\"secondaryGroups.length > 1\">\n <span>Allow null secondary group</span>\n <pl-toggle-switch v-model=\"settings.axisX.allowNullSecondaryGroups\" />\n </div>\n <div class=\"axes-settings-options-row\" v-if=\"store.reactive.chartType === 'discrete'\">\n <span>Labels rotation</span>\n <btn-icon-group :options=\"OPTIONS_LABELS_ROTATION\" v-model=\"xLabelsRotation\" />\n </div>\n <div class=\"axes-settings-options-row block\">\n <pl-btn-group\n label=\"Title\"\n :options=\"OPTIONS_AXIS_LABEL_MODE\"\n v-model=\"settings.axisX.titleMode\"\n />\n </div>\n <div v-if=\"settings.axisX.titleMode === 'custom'\">\n <pl-text-field\n label=\"Text\"\n placeholder=\"Type\"\n v-model=\"settings.axisX.customTitle\"\n />\n </div>\n <div class=\"axes-settings-options-row table\">\n <span>Gridlines</span>\n <pl-toggle-switch v-model=\"settings.axisX.gridlines\" />\n </div>\n <div class=\"axes-settings-options-row table\">\n <span>Lines between categories</span>\n <pl-toggle-switch v-model=\"settings.axisX.linesBetweenCategories\" />\n </div>\n <div class=\"axes-settings-options-row table\">\n <span>Ticks</span>\n <pl-toggle-switch v-model=\"settings.axisX.ticks\" />\n </div>\n </collapsable-block>\n <!-- Y axis settings-->\n <collapsable-block title=\"Y-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n <div class=\"axes-settings-options-row block\">\n <pl-btn-group\n label=\"Title\"\n :options=\"OPTIONS_AXIS_LABEL_MODE\"\n v-model=\"settings.axisY.titleMode\"\n />\n </div>\n <div v-if=\"settings.axisY.titleMode === 'custom'\">\n <pl-text-field\n label=\"Text\"\n placeholder=\"Type\"\n v-model=\"settings.axisY.customTitle\"\n />\n </div>\n <div class=\"axes-settings-options-row block\">\n <pl-btn-group\n label=\"Scale\"\n :options=\"OPTIONS_SCALE\"\n v-model=\"settings.axisY.scale\"\n />\n </div>\n <div class=\"axes-settings-options-row table\">\n <span>Gridlines</span>\n <pl-toggle-switch v-model=\"settings.axisY.gridlines\" />\n </div>\n <div class=\"axes-settings-options-row table\">\n <span>Ticks</span>\n <pl-toggle-switch v-model=\"settings.axisY.ticks\" />\n </div>\n </collapsable-block>\n <!-- Facet settings-->\n <div class=\"other\">\n <div class=\"axes-settings-options-row\">\n <span>Frame</span>\n <btn-icon-group :options=\"OPTIONS_CHART_FRAME\" v-model=\"settings.other.frame\" />\n </div>\n <div class=\"axes-settings-options-row\">\n <span>Reverse axes</span>\n <pl-toggle-switch v-model=\"settings.other.reverse\" />\n </div>\n <div class=\"axes-settings-options-row\">\n <Slider\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 v-model=\"settings.other.facetColumns\"\n />\n </div>\n <div class=\"axes-settings-options-row block\">\n <pl-btn-group\n label=\"Facet shared by\"\n :options=\"OPTIONS_FACET_SHARED\"\n v-model=\"settings.other.facetSharedBy\"\n />\n </div>\n </div>\n </div>\n </div>\n</template>\n"],"names":["store","useStore","settings","blockSettings","OPTIONS_TITLE_ALIGN","AlignLeft","AlignCenter","AlignRight","OPTIONS_LABELS_ROTATION","Rotation0","Rotation45","Rotation90","OPTIONS_AXIS_LABEL_MODE","OPTIONS_SCALE","OPTIONS_CHART_FRAME","FrameEmpty","FrameLeft","FrameBottom","FrameLeftBottom","FrameFull","inputGuide","computed","labelsInfo","reorderPrimaryOpen","ref","reorderSecondaryOpen","defaultReorderPrimaryOpen","defaultReorderSecondaryOpen","onMounted","watch","v","primaryGrouping","_b","_a","secondaryGrouping","primaryGroups","secondaryGroups","usedAesInMapping","mappingPrimary","createDefaultMapping","mappingSecondary","primaryInfo","selectedSourceInfo","valueLabels","res","secondaryInfo","updateOrder","value","sourceId","OPTIONS_FACET_SHARED","primaryOptions","xLabelsRotation","getDiscreteLabelsRotation"],"mappings":"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"}
1	+ {"version":3,"file":"DiscreteAxesSettingsForm.vue.js","sources":["../../../../src/GraphMaker/forms/AxesSettingsForm/DiscreteAxesSettingsForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Slider, PlToggleSwitch } 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 { AestheticMappingCategorical, createDefaultMapping } from '../../dataBindAes';\nimport { LabelsRotation } from '../../types';\nimport { getDiscreteLabelsRotation } from '../../utils';\nimport { watch } from 'vue';\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};\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: 'Hide' }\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));\nconst mappingSecondary = ref(store.value.reactive.dataBindAes[secondaryGrouping.value] as AestheticMappingCategorical ?? createDefaultMapping(secondaryGroups.value));\n\nconst primaryInfo = computed(() => {\n if (primaryGrouping.value) {\n const selectedSourceInfo = inputGuide.value.getSourceInfo(primaryGrouping.value) ?? null;\n const valueLabels = labelsInfo.value[primaryGrouping.value]?.labels ?? null;\n return {\n selectedSourceInfo,\n labels: primaryGroups.value.reduce((res: Record<string, string>, v) => {\n res[v] = valueLabels?.[v] ?? String(v);\n return res;\n }, {})\n };\n }\n});\nconst secondaryInfo = computed(() => {\n if (secondaryGrouping.value) {\n const selectedSourceInfo = inputGuide.value.getSourceInfo(secondaryGrouping.value) ?? null;\n const valueLabels = labelsInfo.value[secondaryGrouping.value]?.labels ?? null;\n return {\n selectedSourceInfo,\n labels: secondaryGroups.value.reduce((res: Record<string, string>, v) => {\n res[v] = valueLabels?.[v] ?? String(v);\n return res;\n }, {})\n };\n }\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(() => labelsInfo.value[primaryGrouping.value])\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 <collapsable-block title=\"Title\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n <div class=\"axes-settings-options-row block\">\n <pl-btn-group\n label=\"Title\"\n :options=\"OPTIONS_AXIS_LABEL_MODE\"\n v-model=\"settings.title.mode\"\n />\n </div>\n <div class=\"axes-settings-input\" v-if=\"settings.title.mode === 'custom'\">\n <pl-text-field\n label=\"Chart title\"\n placeholder=\"Chart title\"\n v-model=\"settings.title.value\"\n />\n </div>\n <div class=\"axes-settings-options-row\">\n <span>Alignment</span>\n <btn-icon-group :options=\"OPTIONS_TITLE_ALIGN\" v-model=\"settings.title.position\"/>\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 </collapsable-block>\n <!-- X axis settings-->\n <collapsable-block title=\"X-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n <div class=\"axes-settings-options-row\" v-if=\"primaryGroups.length > 1\">\n <span>Primary groups order: </span>\n <aes-button :data=\"{type: 'data', value: null}\" @click=\"reorderPrimaryOpen = true\" />\n <template v-if=\"reorderPrimaryOpen && primaryInfo\">\n <form-wrapper\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 <aes-data-mapping\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 v-model=\"mappingPrimary\"\n @update:modelValue=\"(value:AestheticMappingCategorical) => updateOrder(value, primaryGrouping)\"\n />\n </form-wrapper>\n </template>\n </div>\n <div class=\"axes-settings-options-row\" v-if=\"primaryGroups.length > 1\">\n <span>Allow null primary group</span>\n <pl-toggle-switch v-model=\"settings.axisX.allowNullPrimaryGroups\" />\n </div>\n <div class=\"axes-settings-options-row\" v-if=\"secondaryGroups.length > 1\">\n <span>Secondary groups order: </span>\n <aes-button :data=\"{type: 'data', value: null}\" @click=\"reorderSecondaryOpen = true\" />\n <template v-if=\"reorderSecondaryOpen && secondaryInfo\">\n <form-wrapper\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 <aes-data-mapping\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 v-model=\"mappingSecondary\"\n @update:modelValue=\"(value:AestheticMappingCategorical) => updateOrder(value, secondaryGrouping)\"\n />\n </form-wrapper>\n </template>\n </div>\n <div class=\"axes-settings-options-row\" v-if=\"secondaryGroups.length > 1\">\n <span>Allow null secondary group</span>\n <pl-toggle-switch v-model=\"settings.axisX.allowNullSecondaryGroups\" />\n </div>\n <div class=\"axes-settings-options-row\" v-if=\"store.reactive.chartType === 'discrete'\">\n <span>Labels rotation</span>\n <btn-icon-group :options=\"OPTIONS_LABELS_ROTATION\" v-model=\"xLabelsRotation\" />\n </div>\n <div class=\"axes-settings-options-row block\">\n <pl-btn-group\n label=\"Title\"\n :options=\"OPTIONS_AXIS_LABEL_MODE\"\n v-model=\"settings.axisX.titleMode\"\n />\n </div>\n <div v-if=\"settings.axisX.titleMode === 'custom'\">\n <pl-text-field\n label=\"Text\"\n placeholder=\"Type\"\n v-model=\"settings.axisX.customTitle\"\n />\n </div>\n <div class=\"axes-settings-options-row table\">\n <span>Gridlines</span>\n <pl-toggle-switch v-model=\"settings.axisX.gridlines\" />\n </div>\n <div class=\"axes-settings-options-row table\">\n <span>Lines between categories</span>\n <pl-toggle-switch v-model=\"settings.axisX.linesBetweenCategories\" />\n </div>\n <div class=\"axes-settings-options-row table\">\n <span>Ticks</span>\n <pl-toggle-switch v-model=\"settings.axisX.ticks\" />\n </div>\n </collapsable-block>\n <!-- Y axis settings-->\n <collapsable-block title=\"Y-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n <div class=\"axes-settings-options-row block\">\n <pl-btn-group\n label=\"Title\"\n :options=\"OPTIONS_AXIS_LABEL_MODE\"\n v-model=\"settings.axisY.titleMode\"\n />\n </div>\n <div v-if=\"settings.axisY.titleMode === 'custom'\">\n <pl-text-field\n label=\"Text\"\n placeholder=\"Type\"\n v-model=\"settings.axisY.customTitle\"\n />\n </div>\n <div class=\"axes-settings-options-row block\">\n <pl-btn-group\n label=\"Scale\"\n :options=\"OPTIONS_SCALE\"\n v-model=\"settings.axisY.scale\"\n />\n </div>\n <div class=\"axes-settings-options-row table\">\n <span>Gridlines</span>\n <pl-toggle-switch v-model=\"settings.axisY.gridlines\" />\n </div>\n <div class=\"axes-settings-options-row table\">\n <span>Ticks</span>\n <pl-toggle-switch v-model=\"settings.axisY.ticks\" />\n </div>\n </collapsable-block>\n <!-- Facet settings-->\n <div class=\"other\">\n <div class=\"axes-settings-options-row\">\n <span>Frame</span>\n <btn-icon-group :options=\"OPTIONS_CHART_FRAME\" v-model=\"settings.other.frame\" />\n </div>\n <div class=\"axes-settings-options-row\">\n <span>Reverse axes</span>\n <pl-toggle-switch v-model=\"settings.other.reverse\" />\n </div>\n <div class=\"axes-settings-options-row\">\n <Slider\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 v-model=\"settings.other.facetColumns\"\n />\n </div>\n <div class=\"axes-settings-options-row block\">\n <pl-btn-group\n label=\"Facet shared by\"\n :options=\"OPTIONS_FACET_SHARED\"\n v-model=\"settings.other.facetSharedBy\"\n />\n </div>\n </div>\n </div>\n </div>\n</template>\n"],"names":["store","useStore","settings","blockSettings","OPTIONS_TITLE_ALIGN","AlignLeft","AlignCenter","AlignRight","OPTIONS_LABELS_ROTATION","Rotation0","Rotation45","Rotation90","OPTIONS_AXIS_LABEL_MODE","OPTIONS_SCALE","OPTIONS_CHART_FRAME","FrameEmpty","FrameLeft","FrameBottom","FrameLeftBottom","FrameFull","inputGuide","computed","labelsInfo","reorderPrimaryOpen","ref","reorderSecondaryOpen","defaultReorderPrimaryOpen","defaultReorderSecondaryOpen","onMounted","watch","v","primaryGrouping","_b","_a","secondaryGrouping","primaryGroups","secondaryGroups","usedAesInMapping","mappingPrimary","createDefaultMapping","mappingSecondary","primaryInfo","selectedSourceInfo","valueLabels","res","secondaryInfo","updateOrder","value","sourceId","OPTIONS_FACET_SHARED","primaryOptions","xLabelsRotation","getDiscreteLabelsRotation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,UAAMA,IAAQC,GAAA,GACRC,IAAWF,EAAM,MAAM,SAAS,cAChCG,IAAgB;AAAA,MACpB,QAAQ;AAAA,MACR,mBAAmB;AAAA,MACnB,cAAc;AAAA,IAAA,GAGVC,IAAsB;AAAA,MAC1B,EAAC,OAAO,QAAQ,MAAMC,GAAA;AAAA,MACtB,EAAC,OAAO,UAAU,MAAMC,GAAA;AAAA,MACxB,EAAC,OAAO,SAAS,MAAMC,GAAA;AAAA,IAAU,GAM7BC,IAA0B;AAAA,MAC9B,EAAE,OAAO,UAAU,MAAMC,GAAA;AAAA,MACzB,EAAE,OAAO,SAAS,MAAMC,GAAA;AAAA,MACxB,EAAE,OAAO,SAAS,MAAMC,GAAA;AAAA,IAAW,GAE/BC,IAA0B;AAAA,MAC9B,EAAE,OAAO,QAAQ,MAAM,OAAA;AAAA,MACvB,EAAE,OAAO,UAAU,MAAM,SAAA;AAAA,MACzB,EAAE,OAAO,UAAU,MAAM,OAAA;AAAA,IAAO,GAE5BC,IAAgB;AAAA,MACpB,EAAE,OAAO,UAAU,MAAM,SAAA;AAAA,MACzB,EAAE,OAAO,OAAO,MAAM,MAAA;AAAA,IAAM,GAExBC,IAAsB;AAAA,MAC1B,EAAE,OAAO,SAAS,MAAMC,GAAA;AAAA,MACxB,EAAE,OAAO,QAAQ,MAAMC,GAAA;AAAA,MACvB,EAAE,OAAO,UAAU,MAAMC,GAAA;AAAA,MACzB,EAAE,OAAO,eAAe,MAAMC,GAAA;AAAA,MAC9B,EAAE,OAAO,QAAQ,MAAMC,GAAA;AAAA,IAAU,GAG7BC,IAAaC,EAAS,MAAMrB,EAAM,MAAM,WAAW,KAAK,GACxDsB,IAAaD,EAAS,MAAMrB,EAAM,MAAM,iBAAiB,KAAK,GAE9DuB,IAAqBC,EAAI,EAAK,GAC9BC,IAAuBD,EAAI,EAAK,GAEhCE,IAA4BL,EAAS,MAAMrB,EAAM,MAAM,SAAS,gBAAgB,KAAQ,kBAAkB,GAC1G2B,IAA8BN,EAAS,MAAMrB,EAAM,MAAM,SAAS,gBAAgB,KAAQ,oBAAoB;AACpH,IAAA4B,GAAU,MAAM;AACd,MAAIF,EAA0B,UAC5BH,EAAmB,QAAQ,KAEzBI,EAA4B,UAC9BF,EAAqB,QAAQ;AAAA,IAEjC,CAAC,GACDI,EAAM,MAAMH,EAA0B,OAAO,CAACI,MAAM;AAClD,MAAIA,MACFL,EAAqB,QAAQ,IAC7BF,EAAmB,QAAQ;AAAA,IAE/B,CAAC,GACDM,EAAM,MAAMF,EAA4B,OAAO,CAACG,MAAM;AACpD,MAAIA,MACFP,EAAmB,QAAQ,IAC3BE,EAAqB,QAAQ;AAAA,IAEjC,CAAC;AAED,UAAMM,IAAkBV,EAAS;;AAAM,cAAAW,KAAAC,IAAAjC,EAAM,MAAM,SAAS,aAAa,WAAW,oBAA7C,gBAAAiC,EAA8D,eAAe,OAA7E,gBAAAD,EAAiF;AAAA,KAAc,GAChIE,IAAoBb,EAAS;;AAAM,cAAAW,KAAAC,IAAAjC,EAAM,MAAM,SAAS,aAAa,WAAW,sBAA7C,gBAAAiC,EAAgE,eAAe,OAA/E,gBAAAD,EAAmF;AAAA,KAAc,GAEpIG,IAAgBd,EAAS,MAAMrB,EAAM,MAAM,kBAAkB,cAAc,KAAK,GAChFoC,IAAkBf,EAAS,MAAMrB,EAAM,MAAM,kBAAkB,gBAAgB,KAAK,GAEpFqC,IAAmBhB,EAAS,MAAMrB,EAAM,MAAM,kBAAkB,iBAAiB,KAAK,GAEtFsC,IAAiBd,EAAIxB,EAAM,MAAM,SAAS,YAAY+B,EAAgB,KAAK,KAAoCQ,EAAqBJ,EAAc,KAAK,CAAC,GACxJK,IAAmBhB,EAAIxB,EAAM,MAAM,SAAS,YAAYkC,EAAkB,KAAK,KAAoCK,EAAqBH,EAAgB,KAAK,CAAC,GAE9JK,IAAcpB,EAAS,MAAM;;AACjC,UAAIU,EAAgB,OAAO;AACzB,cAAMW,IAAqBtB,EAAW,MAAM,cAAcW,EAAgB,KAAK,KAAK,MAC9EY,MAAcV,IAAAX,EAAW,MAAMS,EAAgB,KAAK,MAAtC,gBAAAE,EAAyC,WAAU;AACvE,eAAO;AAAA,UACL,oBAAAS;AAAA,UACA,QAAQP,EAAc,MAAM,OAAO,CAACS,GAA6Bd,OAC/Dc,EAAId,CAAC,KAAIa,KAAA,gBAAAA,EAAcb,OAAM,OAAOA,CAAC,GAC9Bc,IACN,CAAA,CAAE;AAAA,QAAA;AAAA,MAET;AAAA,IACF,CAAC,GACKC,IAAgBxB,EAAS,MAAM;;AACnC,UAAIa,EAAkB,OAAO;AAC3B,cAAMQ,IAAqBtB,EAAW,MAAM,cAAcc,EAAkB,KAAK,KAAK,MAChFS,MAAcV,IAAAX,EAAW,MAAMY,EAAkB,KAAK,MAAxC,gBAAAD,EAA2C,WAAU;AACzE,eAAO;AAAA,UACL,oBAAAS;AAAA,UACA,QAAQN,EAAgB,MAAM,OAAO,CAACQ,GAA6Bd,OACjEc,EAAId,CAAC,KAAIa,KAAA,gBAAAA,EAAcb,OAAM,OAAOA,CAAC,GAC9Bc,IACN,CAAA,CAAE;AAAA,QAAA;AAAA,MAET;AAAA,IACF,CAAC;AAED,aAASE,EAAYC,GAAoCC,GAAkB;AACzE,MAAAhD,EAAM,MAAM,SAAS,YAAYgD,CAAQ,IAAID;AAAA,IAC/C;AAEA,UAAME,IAAuB;AAAA,MAC3B,EAAE,MAAM,KAAK,OAAO,IAAA;AAAA,MACpB,EAAE,MAAM,KAAK,OAAO,IAAA;AAAA,MACpB,EAAE,MAAM,MAAM,OAAO,KAAA;AAAA,MACrB,EAAE,MAAM,QAAQ,OAAO,OAAA;AAAA,IAAO,GAG1BC,IAAiB7B,EAAS,MAAMC,EAAW,MAAMS,EAAgB,KAAK,CAAC,GACvEoB,IAAkB9B,EAAS;AAAA,MAC/B,MAAK;;AACH,eAAO+B,GAA0BlD,EAAS,MAAM,iBAAgB+B,IAAAiB,EAAe,UAAf,gBAAAjB,EAAsB,OAAO;AAAA,MAC/F;AAAA,MACA,IAAIc,GAAsB;AACxB,QAAA7C,EAAS,MAAM,iBAAiB6C;AAAA,MAClC;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/GraphMaker/forms/DataMappingForm/DiscreteForm.vue.js CHANGED Viewed

@@ -1,22 +1,28 @@
-import { defineComponent as I, watch as b, computed as v, createBlock as G, openBlock as s, withCtx as a, createElementBlock as u, Fragment as S, renderList as V, unref as r, createVNode as n, mergeProps as D, toHandlers as E, createElementVNode as h } from "vue";
+import { defineComponent as I, watch as b, computed as v, createBlock as G, openBlock as p, withCtx as a, createElementBlock as u, Fragment as S, renderList as V, unref as r, createVNode as i, mergeProps as D, toHandlers as E, createElementVNode as h } from "vue";
 import { PlDropdown as k } from "@platforma-sdk/ui-vue";
 import { useStore as F } from "../../store.js";
 import { getErrorForPlDropdown as O } from "./utils.js";
 import "../../constantsAesthetic.js";
 import "../../../node_modules/@milaboratories/pf-plots/dist/index.js";
+import "../../../node_modules/@milaboratories/pl-model-common/dist/drivers/blob.js";
+import "../../../node_modules/@milaboratories/pl-model-common/dist/drivers/pframe/spec/spec.js";
+import "../../../node_modules/@milaboratories/pl-model-common/dist/plid.js";
+import "../../../node_modules/@milaboratories/pl-model-common/dist/ref.js";
+import "../../../node_modules/@platforma-sdk/model/dist/render/util/label.js";
+import "../../../node_modules/@milaboratories/pl-error-like/dist/error_like_shape.js";
 import { checkStatisticsInputsValidity as w } from "../../utils/getStatisticsOptions.js";
 import $ from "../../components/DragAndDrop/DndBasket.vue.js";
 import x from "./Layout/FormLayout.vue.js";
 import A from "./Layout/OptionsList.vue.js";
 import L from "./Layout/MandatoryOptions.vue.js";
 import { useBaskets as T } from "./useBaskets.js";
-const U = { class: "data-form-input-item" }, W = /* @__PURE__ */ I({
+const U = { class: "data-form-input-item" }, er = /* @__PURE__ */ I({
   __name: "DiscreteForm",
   setup(C) {
-    const t = F();
+    const e = F();
     b(
-      () => t.value.commonHelpersData.primaryGroups.value,
-      w(t)
+      () => e.value.commonHelpersData.primaryGroups.value,
+      w(e)
     );
     const c = [
       "filters",
@@ -31,7 +37,7 @@ const U = { class: "data-form-input-item" }, W = /* @__PURE__ */ I({
       tabBy: "Tab by",
       facetBy: "Facet by"
     }, {
-      draggedId: p,
+      draggedId: s,
       basketsData: y,
       freeMetaOptions: g,
       freeMandatoryOptions: _,
@@ -39,50 +45,50 @@ const U = { class: "data-form-input-item" }, W = /* @__PURE__ */ I({
       dataStateValues: m,
       dataOptions: B
     } = T(
-      t,
+      e,
       ["y"],
       ["filters", "tabBy"],
       ["primaryGrouping", "secondaryGrouping", "facetBy"],
       c,
       f
     ), d = v(() => {
-      var i;
-      return ((i = t.value.readonlyInputs) == null ? void 0 : i.includes("y")) ?? !1;
+      var n;
+      return ((n = e.value.readonlyInputs) == null ? void 0 : n.includes("y")) ?? !1;
     });
-    return (i, e) => (s(), G(x, null, {
+    return (n, t) => (p(), G(x, null, {
       dataInputs: a(() => [
         h("div", U, [
-          n(r(k), {
+          i(r(k), {
             modelValue: r(m).y,
-            "onUpdate:modelValue": e[0] || (e[0] = (o) => r(m).y = o),
+            "onUpdate:modelValue": t[0] || (t[0] = (o) => r(m).y = o),
             options: r(B).y,
             disabled: d.value,
-            error: r(O)("y", r(t).inputGuide.value),
+            error: r(O)("y", r(e).inputGuide.value),
             label: "Y:",
             clearable: !d.value
           }, null, 8, ["modelValue", "options", "disabled", "error", "clearable"])
         ])
       ]),
       mandatoryOptions: a(() => [
-        n(L, {
+        i(L, {
           options: r(_),
           chipInfo: r(l),
-          onDraggedIdUpdate: e[1] || (e[1] = (o) => p.value = o)
+          onDraggedIdUpdate: t[1] || (t[1] = (o) => s.value = o)
         }, null, 8, ["options", "chipInfo"])
       ]),
       metadataOptions: a(() => [
-        n(A, {
+        i(A, {
           options: r(g),
           chipInfo: r(l),
-          onDraggedIdUpdate: e[2] || (e[2] = (o) => p.value = o)
+          onDraggedIdUpdate: t[2] || (t[2] = (o) => s.value = o)
         }, null, 8, ["options", "chipInfo"])
       ]),
       chartVar: a(() => [
-        (s(!0), u(S, null, V(r(y), (o) => (s(), u("div", {
+        (p(!0), u(S, null, V(r(y), (o) => (p(), u("div", {
           key: o.id,
           class: "data-form-input-item"
         }, [
-          n($, D({ ref_for: !0 }, o, E(o.listeners)), null, 16)
+          i($, D({ ref_for: !0 }, o, E(o.listeners)), null, 16)
         ]))), 128))
       ]),
       _: 1
@@ -90,6 +96,6 @@ const U = { class: "data-form-input-item" }, W = /* @__PURE__ */ I({
   }
 });
 export {
-  W as default
+  er as default
 };
 //# sourceMappingURL=DiscreteForm.vue.js.map

package/dist/GraphMaker/forms/DataMappingForm/DiscreteForm.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DiscreteForm.vue.js","sources":["../../../../src/GraphMaker/forms/DataMappingForm/DiscreteForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlDropdown } from '@platforma-sdk/ui-vue';\nimport { DiscreteUIState } from '@milaboratories/pf-plots';\nimport { computed, watch} from 'vue';\nimport { useStore } from '../../store';\nimport { getErrorForPlDropdown } from './utils';\nimport { checkStatisticsInputsValidity } from '../../utils';\nimport DndBasket from '../../components/DragAndDrop/DndBasket.vue';\nimport FormLayout from './Layout/FormLayout.vue';\nimport OptionsList from './Layout/OptionsList.vue';\nimport MandatoryOptionsList from './Layout/MandatoryOptions.vue';\nimport { useBaskets } from './useBaskets';\n\nconst store = useStore();\n\nwatch(\n () => store.value.commonHelpersData.primaryGroups.value,\n checkStatisticsInputsValidity(store)\n);\n\ntype BasketIds = Exclude<keyof DiscreteUIState['components'], 'y'>;\ntype DataIds = keyof DiscreteUIState['components'] & 'y'\n\nconst BASKETS: BasketIds[] = [\n 'filters',\n 'primaryGrouping',\n 'secondaryGrouping',\n 'tabBy',\n 'facetBy'\n];\nconst BASKET_LABELS: Record<BasketIds, string> = {\n filters: 'Filter',\n primaryGrouping: 'Primary grouping',\n secondaryGrouping: 'Secondary grouping',\n tabBy: 'Tab by',\n facetBy: 'Facet by'\n};\n\nconst {\n draggedId,\n basketsData,\n freeMetaOptions,\n freeMandatoryOptions,\n chipInfo,\n dataStateValues,\n dataOptions\n} = useBaskets<DiscreteUIState, BasketIds, DataIds>(\n store,\n ['y'],\n ['filters', 'tabBy'],\n ['primaryGrouping', 'secondaryGrouping', 'facetBy'],\n BASKETS,\n BASKET_LABELS\n);\n\nconst readonlyY = computed(() => store.value.readonlyInputs?.includes('y') ?? false);\n</script>\n\n<template>\n <form-layout>\n <template v-slot:dataInputs>\n <div class=\"data-form-input-item\">\n <pl-dropdown\n v-model=\"dataStateValues.y\"\n :options=\"dataOptions.y\"\n :disabled=\"readonlyY\"\n :error=\"getErrorForPlDropdown('y', store.inputGuide.value)\"\n label=\"Y:\"\n :clearable=\"!readonlyY\"\n />\n </div>\n </template>\n <template v-slot:mandatoryOptions>\n <MandatoryOptionsList\n :options=\"freeMandatoryOptions\"\n :chipInfo=\"chipInfo\"\n @dragged-id-update=\"draggedId = $event\"\n />\n </template>\n <template v-slot:metadataOptions>\n <OptionsList\n :options=\"freeMetaOptions\"\n :chipInfo=\"chipInfo\"\n @dragged-id-update=\"draggedId = $event\"\n />\n </template>\n <template v-slot:chartVar>\n <div\n v-for=\"basketProp in basketsData\"\n :key=\"basketProp.id\"\n class=\"data-form-input-item\"\n >\n <DndBasket v-bind=\"basketProp\" v-on=\"basketProp.listeners\" />\n </div>\n </template>\n </form-layout>\n</template>\n"],"names":["store","useStore","watch","checkStatisticsInputsValidity","BASKETS","BASKET_LABELS","draggedId","basketsData","freeMetaOptions","freeMandatoryOptions","chipInfo","dataStateValues","dataOptions","useBaskets","readonlyY","computed","_a"],"mappings":"~~;;;;;;;;;;;;;;;~~AAaA,UAAMA,IAAQC,EAAA;AAEd,IAAAC;AAAA,MACE,MAAMF,EAAM,MAAM,kBAAkB,cAAc;AAAA,MAClDG,EAA8BH,CAAK;AAAA,IAAA;AAMrC,UAAMI,IAAuB;AAAA,MAC3B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,GAEIC,IAA2C;AAAA,MAC/C,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB,mBAAmB;AAAA,MACnB,OAAO;AAAA,MACP,SAAS;AAAA,IAAA,GAGL;AAAA,MACJ,WAAAC;AAAA,MACA,aAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,sBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,aAAAC;AAAA,IAAA,IACEC;AAAA,MACFb;AAAA,MACA,CAAC,GAAG;AAAA,MACJ,CAAC,WAAW,OAAO;AAAA,MACnB,CAAC,mBAAmB,qBAAqB,SAAS;AAAA,MAClDI;AAAA,MACAC;AAAA,IAAA,GAGIS,IAAYC,EAAS,MAAA;;AAAM,eAAAC,IAAAhB,EAAM,MAAM,mBAAZ,gBAAAgB,EAA4B,SAAS,SAAQ;AAAA,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"DiscreteForm.vue.js","sources":["../../../../src/GraphMaker/forms/DataMappingForm/DiscreteForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlDropdown } from '@platforma-sdk/ui-vue';\nimport { DiscreteUIState } from '@milaboratories/pf-plots';\nimport { computed, watch} from 'vue';\nimport { useStore } from '../../store';\nimport { getErrorForPlDropdown } from './utils';\nimport { checkStatisticsInputsValidity } from '../../utils';\nimport DndBasket from '../../components/DragAndDrop/DndBasket.vue';\nimport FormLayout from './Layout/FormLayout.vue';\nimport OptionsList from './Layout/OptionsList.vue';\nimport MandatoryOptionsList from './Layout/MandatoryOptions.vue';\nimport { useBaskets } from './useBaskets';\n\nconst store = useStore();\n\nwatch(\n () => store.value.commonHelpersData.primaryGroups.value,\n checkStatisticsInputsValidity(store)\n);\n\ntype BasketIds = Exclude<keyof DiscreteUIState['components'], 'y'>;\ntype DataIds = keyof DiscreteUIState['components'] & 'y'\n\nconst BASKETS: BasketIds[] = [\n 'filters',\n 'primaryGrouping',\n 'secondaryGrouping',\n 'tabBy',\n 'facetBy'\n];\nconst BASKET_LABELS: Record<BasketIds, string> = {\n filters: 'Filter',\n primaryGrouping: 'Primary grouping',\n secondaryGrouping: 'Secondary grouping',\n tabBy: 'Tab by',\n facetBy: 'Facet by'\n};\n\nconst {\n draggedId,\n basketsData,\n freeMetaOptions,\n freeMandatoryOptions,\n chipInfo,\n dataStateValues,\n dataOptions\n} = useBaskets<DiscreteUIState, BasketIds, DataIds>(\n store,\n ['y'],\n ['filters', 'tabBy'],\n ['primaryGrouping', 'secondaryGrouping', 'facetBy'],\n BASKETS,\n BASKET_LABELS\n);\n\nconst readonlyY = computed(() => store.value.readonlyInputs?.includes('y') ?? false);\n</script>\n\n<template>\n <form-layout>\n <template v-slot:dataInputs>\n <div class=\"data-form-input-item\">\n <pl-dropdown\n v-model=\"dataStateValues.y\"\n :options=\"dataOptions.y\"\n :disabled=\"readonlyY\"\n :error=\"getErrorForPlDropdown('y', store.inputGuide.value)\"\n label=\"Y:\"\n :clearable=\"!readonlyY\"\n />\n </div>\n </template>\n <template v-slot:mandatoryOptions>\n <MandatoryOptionsList\n :options=\"freeMandatoryOptions\"\n :chipInfo=\"chipInfo\"\n @dragged-id-update=\"draggedId = $event\"\n />\n </template>\n <template v-slot:metadataOptions>\n <OptionsList\n :options=\"freeMetaOptions\"\n :chipInfo=\"chipInfo\"\n @dragged-id-update=\"draggedId = $event\"\n />\n </template>\n <template v-slot:chartVar>\n <div\n v-for=\"basketProp in basketsData\"\n :key=\"basketProp.id\"\n class=\"data-form-input-item\"\n >\n <DndBasket v-bind=\"basketProp\" v-on=\"basketProp.listeners\" />\n </div>\n </template>\n </form-layout>\n</template>\n"],"names":["store","useStore","watch","checkStatisticsInputsValidity","BASKETS","BASKET_LABELS","draggedId","basketsData","freeMetaOptions","freeMandatoryOptions","chipInfo","dataStateValues","dataOptions","useBaskets","readonlyY","computed","_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,EAAA;AAEd,IAAAC;AAAA,MACE,MAAMF,EAAM,MAAM,kBAAkB,cAAc;AAAA,MAClDG,EAA8BH,CAAK;AAAA,IAAA;AAMrC,UAAMI,IAAuB;AAAA,MAC3B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,GAEIC,IAA2C;AAAA,MAC/C,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB,mBAAmB;AAAA,MACnB,OAAO;AAAA,MACP,SAAS;AAAA,IAAA,GAGL;AAAA,MACJ,WAAAC;AAAA,MACA,aAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,sBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,aAAAC;AAAA,IAAA,IACEC;AAAA,MACFb;AAAA,MACA,CAAC,GAAG;AAAA,MACJ,CAAC,WAAW,OAAO;AAAA,MACnB,CAAC,mBAAmB,qBAAqB,SAAS;AAAA,MAClDI;AAAA,MACAC;AAAA,IAAA,GAGIS,IAAYC,EAAS,MAAA;;AAAM,eAAAC,IAAAhB,EAAM,MAAM,mBAAZ,gBAAAgB,EAA4B,SAAS,SAAQ;AAAA,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StackedArea.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/discrete/StackedArea.vue"],"names":[],"mappings":";~~AAoUA~~,wBAKG"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
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, 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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StackedBar.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/discrete/StackedBar.vue"],"names":[],"mappings":";~~AAuQA~~,wBAKG"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
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, 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/GraphMaker/forms/LayersForm/Layer/scatterplot/Scatter.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Scatter.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/scatterplot/Scatter.vue"],"names":[],"mappings":";~~AAsWA~~,wBAKG"}
1	+ {"version":3,"file":"Scatter.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/scatterplot/Scatter.vue"],"names":[],"mappings":";AAwWA,wBAKG"}