@milaboratories/graph-maker 1.2.4 → 1.2.6

package/dist/components/AesSettings/AesDataMappingContinuous.vue2.js

@@ -1,5 +1,142 @@
-import f from "./AesDataMappingContinuous.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=AesDataMappingContinuous.vue2.js.map
+import { PALETTE_MAP as e } from "../../constantsAesthetic.js";
+import { createContinuousMappingFromPalette as t } from "../../dataBindAes.js";
+import n from "./FormWrapper.js";
+import r from "./PalettesForm.js";
+import i from "../MultiselectButton.js";
+import { createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, openBlock as d, ref as f, toDisplayString as p, unref as m, watch as h, withCtx as g } from "vue";
+import { PlBtnGroup as _, PlNumberField as v } from "@platforma-sdk/ui-vue";
+var y = { class: "aes-mapping-block" }, b = { style: { margin: "0 24px" } }, x = { class: "section-title" }, S = { style: { margin: "24px 0" } }, C = { style: { margin: "24px 0" } }, w = { style: { margin: "24px 0" } }, T = { style: {
+	display: "flex",
+	marginTop: "16px",
+	gap: "8px"
+} }, E = /* @__PURE__ */ u({
+	__name: "AesDataMappingContinuous",
+	props: {
+		dataColumnLabel: {},
+		modelValue: {}
+	},
+	emits: ["update:modelValue"],
+	setup(u, { emit: E }) {
+		let D = u, O = E, k = f(!1), A = f(D.modelValue.palette);
+		function j(e) {
+			A.value = e, k.value = !1, O("update:modelValue", t(e));
+		}
+		let M = [{
+			value: "auto",
+			label: "Auto"
+		}, {
+			value: "custom",
+			label: "Custom"
+		}], N = f(D.modelValue.range ? "custom" : "auto"), P = [{
+			value: "linear",
+			label: "Linear"
+		}, {
+			value: "log",
+			label: "Log"
+		}], F = f(D.modelValue.log ? "log" : "linear"), I = f(D.modelValue.range?.minValue ?? void 0), L = f(D.modelValue.range?.maxValue ?? void 0), R = f(D.modelValue.midPoint ?? void 0);
+		return h(() => N.value, (e) => {
+			e === "custom" && O("update:modelValue", {
+				...D.modelValue,
+				range: {
+					minValue: I.value ?? null,
+					maxValue: L.value ?? null
+				}
+			}), e === "auto" && O("update:modelValue", {
+				...D.modelValue,
+				range: null
+			});
+		}), h(() => I.value, (e) => {
+			O("update:modelValue", {
+				...D.modelValue,
+				range: {
+					...D.modelValue.range,
+					minValue: e
+				}
+			});
+		}), h(() => L.value, (e) => {
+			O("update:modelValue", {
+				...D.modelValue,
+				range: {
+					...D.modelValue.range,
+					maxValue: e
+				}
+			});
+		}), h(() => R.value, (e) => {
+			O("update:modelValue", {
+				...D.modelValue,
+				midPoint: e ?? null
+			});
+		}), h(() => F.value, (e) => {
+			O("update:modelValue", {
+				...D.modelValue,
+				log: e === "log"
+			});
+		}), (t, f) => (d(), s("div", y, [c("div", b, [
+			c("div", x, [c("span", null, p(u.dataColumnLabel), 1)]),
+			c("div", S, [l(i, {
+				label: "Color Palette ",
+				title: m(e)[A.value].title,
+				palette: A.value,
+				onButtonClick: f[0] ||= (e) => {
+					k.value = !0;
+				}
+			}, null, 8, ["title", "palette"])]),
+			c("div", C, [l(m(_), {
+				modelValue: F.value,
+				"onUpdate:modelValue": f[1] ||= (e) => F.value = e,
+				options: P
+			}, null, 8, ["modelValue"])]),
+			c("div", w, [l(m(_), {
+				modelValue: N.value,
+				"onUpdate:modelValue": f[2] ||= (e) => N.value = e,
+				label: "Gradient range",
+				options: M
+			}, null, 8, ["modelValue"])]),
+			c("div", T, [
+				N.value === "custom" ? (d(), a(m(v), {
+					key: 0,
+					modelValue: I.value,
+					"onUpdate:modelValue": f[3] ||= (e) => I.value = e,
+					label: "From",
+					updateOnEnterOrClickOutside: !0,
+					useIncrementButtons: !1
+				}, null, 8, ["modelValue"])) : o("", !0),
+				l(m(v), {
+					modelValue: R.value,
+					"onUpdate:modelValue": f[4] ||= (e) => R.value = e,
+					label: "Mid point",
+					updateOnEnterOrClickOutside: !0,
+					useIncrementButtons: !1,
+					style: {
+						flexGrow: 1,
+						maxWidth: "50%"
+					}
+				}, null, 8, ["modelValue"]),
+				N.value === "custom" ? (d(), a(m(v), {
+					key: 1,
+					modelValue: L.value,
+					"onUpdate:modelValue": f[5] ||= (e) => L.value = e,
+					label: "To",
+					updateOnEnterOrClickOutside: !0,
+					useIncrementButtons: !1
+				}, null, 8, ["modelValue"])) : o("", !0)
+			]),
+			k.value ? (d(), a(n, {
+				key: 0,
+				title: "Color Palette",
+				"back-title": "Color mapping",
+				"onForm:close": f[6] ||= (e) => k.value = !1
+			}, {
+				default: g(() => [l(r, {
+					selected: A.value,
+					categorical: !1,
+					onSelect: j
+				}, null, 8, ["selected"])]),
+				_: 1
+			})) : o("", !0)
+		])]));
+	}
+});
+export { E as default };
+
+//# sourceMappingURL=AesDataMappingContinuous.vue2.js.map

package/dist/components/AesSettings/AesDataMappingContinuous.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"AesDataMappingContinuous.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"AesDataMappingContinuous.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/AesSettings/AesDataMappingContinuous.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlBtnGroup, PlNumberField } from '@platforma-sdk/ui-vue';\nimport { ref, watch } from 'vue';\nimport type { ContinuousPalette, Palette } from './types';\nimport { PALETTE_MAP } from '../../constantsAesthetic';\nimport type { AestheticMappingContinuous } from '../../dataBindAes';\nimport { createContinuousMappingFromPalette } from '../../dataBindAes';\nimport FormWrapper from './FormWrapper.vue';\nimport PalettesForm from './PalettesForm.vue';\nimport MultiselectButton from '../MultiselectButton.vue';\n\nconst props = defineProps<{\n  dataColumnLabel: string;\n  modelValue: AestheticMappingContinuous;\n}>();\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst palettesOpen = ref(false);\nconst palette = ref<Palette>(props.modelValue.palette);\n\nfunction onPaletteSelect(value: Palette) {\n  palette.value = value;\n  palettesOpen.value = false;\n  emit(\n    'update:modelValue',\n    createContinuousMappingFromPalette(value as ContinuousPalette),\n  );\n}\n\nconst MODE_OPTIONS = [{ value: 'auto', label: 'Auto' }, { value: 'custom', label: 'Custom' }];\nconst mode = ref<'auto' | 'custom'>(props.modelValue.range ? 'custom' : 'auto');\n\nconst LOG_LINEAR_OPTIONS = [{ value: 'linear', label: 'Linear' }, { value: 'log', label: 'Log' }];\nconst logOrLinear = ref<'linear' | 'log'>(props.modelValue.log ? 'log' : 'linear');\n\nconst lowerValue = ref<number | undefined>(props.modelValue.range?.minValue ?? undefined);\nconst upperValue = ref<number | undefined>(props.modelValue.range?.maxValue ?? undefined);\n\nconst midPoint = ref<number | undefined>(props.modelValue.midPoint ?? undefined);\n\nwatch(() => mode.value, (v) => {\n  if (v === 'custom') {\n    emit(\n      'update:modelValue',\n      { ...props.modelValue, range: { minValue: lowerValue.value ?? null, maxValue: upperValue.value ?? null } },\n    );\n  }\n  if (v === 'auto') {\n    emit(\n      'update:modelValue',\n      { ...props.modelValue, range: null },\n    );\n  }\n});\nwatch(() => lowerValue.value, (v) => {\n  emit(\n    'update:modelValue',\n    { ...props.modelValue, range: { ...props.modelValue.range, minValue: v } },\n  );\n});\nwatch(() => upperValue.value, (v) => {\n  emit(\n    'update:modelValue',\n    { ...props.modelValue, range: { ...props.modelValue.range, maxValue: v } },\n  );\n});\nwatch(() => midPoint.value, (v) => {\n  emit(\n    'update:modelValue',\n    { ...props.modelValue, midPoint: v ?? null },\n  );\n});\nwatch(() => logOrLinear.value, (v) => {\n  emit(\n    'update:modelValue',\n    { ...props.modelValue, log: v === 'log' },\n  );\n});\n\n</script>\n\n<template>\n  <div class=\"aes-mapping-block\">\n    <div style=\"margin: 0 24px\">\n      <div class=\"section-title\">\n        <span>{{ dataColumnLabel }}</span>\n      </div>\n      <div style=\"margin: 24px 0\">\n        <MultiselectButton\n          label=\"Color Palette \"\n          :title=\"PALETTE_MAP[palette].title\"\n          :palette=\"palette\"\n          @button-click=\"palettesOpen = true;\"\n        />\n      </div>\n      <div style=\"margin: 24px 0\">\n        <PlBtnGroup\n          v-model=\"logOrLinear\"\n          :options=\"LOG_LINEAR_OPTIONS\"\n        />\n      </div>\n      <div style=\"margin: 24px 0\">\n        <PlBtnGroup\n          v-model=\"mode\"\n          label=\"Gradient range\"\n          :options=\"MODE_OPTIONS\"\n        />\n      </div>\n      <div :style=\"{display: 'flex', marginTop: '16px', gap: '8px'}\">\n        <PlNumberField\n          v-if=\"mode === 'custom'\"\n          v-model=\"lowerValue\"\n          label=\"From\"\n          :updateOnEnterOrClickOutside=\"true\"\n          :useIncrementButtons=\"false\"\n        />\n        <PlNumberField\n          v-model=\"midPoint\"\n          label=\"Mid point\"\n          :updateOnEnterOrClickOutside=\"true\"\n          :useIncrementButtons=\"false\"\n          :style=\"{flexGrow: 1, maxWidth: '50%'}\"\n        />\n        <PlNumberField\n          v-if=\"mode === 'custom'\"\n          v-model=\"upperValue\"\n          label=\"To\"\n          :updateOnEnterOrClickOutside=\"true\"\n          :useIncrementButtons=\"false\"\n        />\n      </div>\n      <FormWrapper\n        v-if=\"palettesOpen\"\n        title=\"Color Palette\"\n        back-title=\"Color mapping\"\n        @form:close=\"palettesOpen = false\"\n      >\n        <PalettesForm :selected=\"palette\" :categorical=\"false\" @select=\"onPaletteSelect\" />\n      </FormWrapper>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/AesSettings/AesDataMappingDiscrete.js

@@ -0,0 +1,7 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "./AesDataMappingDiscrete.vue2.js";
+import n from "./AesDataMappingDiscrete.style.js";
+var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
+export { r as default };
+
+//# sourceMappingURL=AesDataMappingDiscrete.js.map

package/dist/components/AesSettings/AesDataMappingDiscrete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AesDataMappingDiscrete.js","names":[],"sources":["../../../src/components/AesSettings/AesDataMappingDiscrete.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { scaleLinear } from 'd3-scale';\nimport { computed, ref, watch } from 'vue';\nimport type {\n  DotShape,\n  LineType,\n  Palette,\n} from './types';\nimport {\n  isCategorical,\n  PALETTE_MAP, UNKNOWN_COLOR,\n} from '../../constantsAesthetic';\nimport type { AesType } from '../../constantsCommon';\nimport type {\n  AestheticMappingCategorical,\n} from '../../dataBindAes';\nimport {\n  changePaletteInExistingCategoricalMapping,\n} from '../../dataBindAes';\nimport FormWrapper from './FormWrapper.vue';\nimport PalettesForm from './PalettesForm.vue';\nimport MultiselectButton from '../MultiselectButton.vue';\nimport PlColorSlider from '../PlColorSlider.vue';\nimport DiscreteRow from './DiscreteRow.vue';\nimport { PlElementList } from '@platforma-sdk/ui-vue';\n\nconst props = defineProps<{\n  dataColumnLabel: string;\n  columnValueLabels: Record<string, string>;\n  usedAesInMapping: Record<AesType, boolean>;\n  modelValue: AestheticMappingCategorical;\n  allowReordering?: boolean;\n  allowHiding?: boolean;\n  allowNullOption?: boolean;\n}>();\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst palettesOpen = ref(false);\nconst palette = ref<Palette>(props.modelValue.palette);\nconst categorical = computed(() => isCategorical(palette.value));\n\ntype EditableAesType = 'color' | 'dotShape' | 'lineType';\n\nconst activeValue = ref<string | null>(null);\nconst activeValueIndex = computed(() => {\n  if (activeValue.value === null) {\n    return null;\n  }\n  return props.modelValue.order.indexOf(activeValue.value);\n});\nconst activeAesType = ref<EditableAesType | null>(null);\n\nfunction onPaletteSelect(value: Palette) {\n  palette.value = value;\n  palettesOpen.value = false;\n  emit(\n    'update:modelValue',\n    changePaletteInExistingCategoricalMapping(value, props.modelValue),\n  );\n}\n\nfunction onAesValueUpdate(\n  value: string | number,\n  aesField: string,\n  aesValue: string | DotShape | LineType,\n) {\n  emit('update:modelValue', {\n    ...props.modelValue,\n    mapping: {\n      ...props.modelValue.mapping,\n      [value]: {\n        ...props.modelValue.mapping[value],\n        aes: {\n          ...props.modelValue.mapping[value].aes,\n          [aesField]: aesValue,\n        },\n      },\n    },\n  });\n}\n\nfunction closeForm() {\n  activeValue.value = null;\n  activeAesType.value = null;\n}\n\nfunction switchVisibility(option: { value: string }) {\n  emit('update:modelValue', {\n    ...props.modelValue,\n    hidden: {\n      ...props.modelValue.hidden,\n      [option.value]: props.modelValue.hidden?.[option.value] ? false : true,\n    },\n  });\n}\n\nfunction getColorScale(colors: string[], unknownColor: string, from = 0, to = 1) {\n  const colorStep = 1 / (colors.length - 1);\n  const scale = scaleLinear<string, string>()\n    .domain(colors.map((_c, idx) => from + idx * colorStep * (to - from)))\n    .range(colors);\n  return (v: number) => {\n    if (v > to || v < from) {\n      return unknownColor;\n    }\n    return scale(v);\n  };\n}\n\nconst continuousColorScale = computed(() =>\n  getColorScale(PALETTE_MAP[palette.value].colors, UNKNOWN_COLOR),\n);\n\nconst colorForPercent = computed(() =>\n  getColorScale(PALETTE_MAP[palette.value].colors, UNKNOWN_COLOR, 0, 100),\n);\nconst continuousMappingItems = ref(\n  props.modelValue.order.map(\n    (item) => props.modelValue.mapping[item].colorIdx * 100,\n  ),\n);\nwatch(\n  () => props.modelValue,\n  (v) => {\n    continuousMappingItems.value = v.order.map(\n      (item) => v.mapping[item].colorIdx * 100,\n    );\n  },\n);\nfunction updateContinuousColors(v: number[]) {\n  v.forEach((value, idx) => {\n    const item = props.modelValue.order[idx];\n    const newColorIdx = value / 100;\n    if (props.modelValue.mapping[item].colorIdx !== newColorIdx) {\n      emit('update:modelValue', {\n        ...props.modelValue,\n        mapping: {\n          ...props.modelValue.mapping,\n          [item]: {\n            colorIdx: newColorIdx,\n            aes: {\n              ...props.modelValue.mapping[item].aes,\n              color: continuousColorScale.value(newColorIdx),\n            },\n          },\n        },\n      });\n    }\n  });\n}\n\nfunction setActiveElementFromColorSlider(e: { index: number; status: boolean }) {\n  activeAesType.value = 'color';\n  activeValue.value = e.status ? props.modelValue.order[e.index] : null;\n}\n\nfunction getOptionsList(data: AestheticMappingCategorical, allowNullOption: boolean) {\n  const options = data.order.map((value: string) => {\n    return {\n      text: props.columnValueLabels[value],\n      value,\n      dotShape: data.mapping[value]?.aes?.dotShape,\n      color: data.mapping[value]?.aes?.color,\n      lineType: data.mapping[value]?.aes?.lineShape,\n    };\n  });\n  return allowNullOption ? options : options.filter((op) => op.value !== 'null');\n}\n\nconst optionsList = ref(getOptionsList(props.modelValue, props.allowNullOption));\nconst reordarableItems = computed(() => optionsList.value);\n\nwatch(\n  [() => palette.value, () => props.allowNullOption],\n  () => {\n    optionsList.value = getOptionsList(props.modelValue, props.allowNullOption);\n  },\n  { deep: true },\n);\nwatch(\n  () => props.modelValue,\n  (newModel) => {\n    optionsList.value = optionsList.value.map((item) => ({\n      ...item,\n      dotShape: newModel.mapping[item.value]?.aes?.dotShape ?? item.dotShape,\n      color: newModel.mapping[item.value]?.aes?.color ?? item.color,\n      lineType: newModel.mapping[item.value]?.aes?.lineShape ?? item.lineType,\n    }));\n  },\n  { deep: true },\n);\nwatch(() => reordarableItems.value, (v) => {\n  const newOrder = v.map((item) => item.value);\n  if (!props.allowNullOption && props.modelValue.order.length > v.length) {\n    newOrder.push('null');\n  }\n  const orderChanged\n    = newOrder.length !== props.modelValue.order.length\n      || newOrder.some((val, idx) => val !== props.modelValue.order[idx]);\n  if (!orderChanged) return;\n  emit('update:modelValue', { ...props.modelValue, order: newOrder });\n}, { deep: true });\n</script>\n\n<template>\n  <div class=\"aes-mapping-block\">\n    <div style=\"margin: 0 24px\">\n      <div class=\"section-title\">\n        <span>{{ dataColumnLabel }}</span>\n      </div>\n      <div style=\"margin: 24px 0\">\n        <MultiselectButton\n          label=\"Color Palette \" icon=\"chevron-right\" :title=\"PALETTE_MAP[palette].title\"\n          :palette=\"palette\" @button-click=\"\n            palettesOpen = true;\n            closeForm();\n          \"\n        />\n      </div>\n      <div v-if=\"!categorical\" style=\"margin: 24px 0\">\n        <PlColorSlider\n          v-model=\"continuousMappingItems\" :colors=\"PALETTE_MAP[palette].colors\"\n          :get-color-for-percent=\"colorForPercent\" :active=\"activeValueIndex\" @active=\"setActiveElementFromColorSlider\"\n          @update:model-value=\"updateContinuousColors\"\n        />\n      </div>\n      <FormWrapper\n        v-if=\"palettesOpen\" title=\"Color Palette\" back-title=\"Color mapping\"\n        @form:close=\"palettesOpen = false\"\n      >\n        <PalettesForm :selected=\"palette\" @select=\"onPaletteSelect\" />\n      </FormWrapper>\n    </div>\n    <div v-if=\"allowReordering\" class=\"aes-settings-hint\">\n      Drag the rows to reorder\n    </div>\n    <div class=\"column-values-list\">\n      <PlElementList\n        v-model:items=\"reordarableItems\"\n        :get-item-key=\"(item) => item.value\"\n        :item-class=\"$style.discreteRow\"\n        :item-class-title=\"$style.discreteRowTitle\"\n        :disableDragging=\"!allowReordering\"\n        :disableRemoving=\"true\"\n        :disableToggling=\"true\"\n        :disablePinning=\"true\"\n      >\n        <template #item-title=\"{ item }\">\n          <DiscreteRow\n            :item=\"item\"\n            :active-value=\"activeValue\"\n            :active-aes-type=\"activeAesType\"\n            :used-aes-in-mapping=\"props.usedAesInMapping\"\n            :allow-hiding=\"allowHiding ?? false\"\n            :allow-reordering=\"allowReordering ?? false\"\n            :hidden=\"props.modelValue.hidden?.[item.value] ?? false\"\n            :palette=\"palette\"\n            :is-categorical=\"categorical\"\n            :on-aes-value-update=\"(field: string, value: string | DotShape | LineType) => onAesValueUpdate(item.value, field, value)\"\n            :on-switch-visibility=\"() => switchVisibility(item)\" :on-active-value-change=\"(v) => activeValue = v\"\n            :on-active-aes-type-change=\"(v) => activeAesType = v\" :on-close-form=\"closeForm\"\n          />\n        </template>\n      </PlElementList>\n    </div>\n  </div>\n</template>\n<style module>\n:global(.graph-maker) .discreteRow {\n  background-color: var(--color-ic-00);\n  border-color: var(--color-div-grey);\n}\n:global(.graph-maker) .discreteRow:hover {\n  --head-background: var(--color-ic-00);\n}\n:global(.graph-maker) .discreteRowTitle,\n:global(.sortable-chosen) .discreteRowTitle {\n  padding-top: 0;\n  padding-bottom: 0;\n  background-color: var(--color-ic-00);\n}\n:global(.graph-maker) .discreteRow:hover .discreteRowTitle {\n  background-color: var(--color-ic-00);\n}\n</style>\n"],"mappings":""}

package/dist/components/AesSettings/AesDataMappingDiscrete.style.js

@@ -0,0 +1,7 @@
+import './AesDataMappingDiscrete.vue.css';var e = {
+	discreteRow: "_discreteRow_1lqg1_2",
+	discreteRowTitle: "_discreteRowTitle_1lqg1_9"
+};
+export { e as default };
+
+//# sourceMappingURL=AesDataMappingDiscrete.style.js.map

package/dist/components/AesSettings/AesDataMappingDiscrete.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AesDataMappingDiscrete.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/AesSettings/AesDataMappingDiscrete.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { scaleLinear } from 'd3-scale';\nimport { computed, ref, watch } from 'vue';\nimport type {\n  DotShape,\n  LineType,\n  Palette,\n} from './types';\nimport {\n  isCategorical,\n  PALETTE_MAP, UNKNOWN_COLOR,\n} from '../../constantsAesthetic';\nimport type { AesType } from '../../constantsCommon';\nimport type {\n  AestheticMappingCategorical,\n} from '../../dataBindAes';\nimport {\n  changePaletteInExistingCategoricalMapping,\n} from '../../dataBindAes';\nimport FormWrapper from './FormWrapper.vue';\nimport PalettesForm from './PalettesForm.vue';\nimport MultiselectButton from '../MultiselectButton.vue';\nimport PlColorSlider from '../PlColorSlider.vue';\nimport DiscreteRow from './DiscreteRow.vue';\nimport { PlElementList } from '@platforma-sdk/ui-vue';\n\nconst props = defineProps<{\n  dataColumnLabel: string;\n  columnValueLabels: Record<string, string>;\n  usedAesInMapping: Record<AesType, boolean>;\n  modelValue: AestheticMappingCategorical;\n  allowReordering?: boolean;\n  allowHiding?: boolean;\n  allowNullOption?: boolean;\n}>();\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst palettesOpen = ref(false);\nconst palette = ref<Palette>(props.modelValue.palette);\nconst categorical = computed(() => isCategorical(palette.value));\n\ntype EditableAesType = 'color' | 'dotShape' | 'lineType';\n\nconst activeValue = ref<string | null>(null);\nconst activeValueIndex = computed(() => {\n  if (activeValue.value === null) {\n    return null;\n  }\n  return props.modelValue.order.indexOf(activeValue.value);\n});\nconst activeAesType = ref<EditableAesType | null>(null);\n\nfunction onPaletteSelect(value: Palette) {\n  palette.value = value;\n  palettesOpen.value = false;\n  emit(\n    'update:modelValue',\n    changePaletteInExistingCategoricalMapping(value, props.modelValue),\n  );\n}\n\nfunction onAesValueUpdate(\n  value: string | number,\n  aesField: string,\n  aesValue: string | DotShape | LineType,\n) {\n  emit('update:modelValue', {\n    ...props.modelValue,\n    mapping: {\n      ...props.modelValue.mapping,\n      [value]: {\n        ...props.modelValue.mapping[value],\n        aes: {\n          ...props.modelValue.mapping[value].aes,\n          [aesField]: aesValue,\n        },\n      },\n    },\n  });\n}\n\nfunction closeForm() {\n  activeValue.value = null;\n  activeAesType.value = null;\n}\n\nfunction switchVisibility(option: { value: string }) {\n  emit('update:modelValue', {\n    ...props.modelValue,\n    hidden: {\n      ...props.modelValue.hidden,\n      [option.value]: props.modelValue.hidden?.[option.value] ? false : true,\n    },\n  });\n}\n\nfunction getColorScale(colors: string[], unknownColor: string, from = 0, to = 1) {\n  const colorStep = 1 / (colors.length - 1);\n  const scale = scaleLinear<string, string>()\n    .domain(colors.map((_c, idx) => from + idx * colorStep * (to - from)))\n    .range(colors);\n  return (v: number) => {\n    if (v > to || v < from) {\n      return unknownColor;\n    }\n    return scale(v);\n  };\n}\n\nconst continuousColorScale = computed(() =>\n  getColorScale(PALETTE_MAP[palette.value].colors, UNKNOWN_COLOR),\n);\n\nconst colorForPercent = computed(() =>\n  getColorScale(PALETTE_MAP[palette.value].colors, UNKNOWN_COLOR, 0, 100),\n);\nconst continuousMappingItems = ref(\n  props.modelValue.order.map(\n    (item) => props.modelValue.mapping[item].colorIdx * 100,\n  ),\n);\nwatch(\n  () => props.modelValue,\n  (v) => {\n    continuousMappingItems.value = v.order.map(\n      (item) => v.mapping[item].colorIdx * 100,\n    );\n  },\n);\nfunction updateContinuousColors(v: number[]) {\n  v.forEach((value, idx) => {\n    const item = props.modelValue.order[idx];\n    const newColorIdx = value / 100;\n    if (props.modelValue.mapping[item].colorIdx !== newColorIdx) {\n      emit('update:modelValue', {\n        ...props.modelValue,\n        mapping: {\n          ...props.modelValue.mapping,\n          [item]: {\n            colorIdx: newColorIdx,\n            aes: {\n              ...props.modelValue.mapping[item].aes,\n              color: continuousColorScale.value(newColorIdx),\n            },\n          },\n        },\n      });\n    }\n  });\n}\n\nfunction setActiveElementFromColorSlider(e: { index: number; status: boolean }) {\n  activeAesType.value = 'color';\n  activeValue.value = e.status ? props.modelValue.order[e.index] : null;\n}\n\nfunction getOptionsList(data: AestheticMappingCategorical, allowNullOption: boolean) {\n  const options = data.order.map((value: string) => {\n    return {\n      text: props.columnValueLabels[value],\n      value,\n      dotShape: data.mapping[value]?.aes?.dotShape,\n      color: data.mapping[value]?.aes?.color,\n      lineType: data.mapping[value]?.aes?.lineShape,\n    };\n  });\n  return allowNullOption ? options : options.filter((op) => op.value !== 'null');\n}\n\nconst optionsList = ref(getOptionsList(props.modelValue, props.allowNullOption));\nconst reordarableItems = computed(() => optionsList.value);\n\nwatch(\n  [() => palette.value, () => props.allowNullOption],\n  () => {\n    optionsList.value = getOptionsList(props.modelValue, props.allowNullOption);\n  },\n  { deep: true },\n);\nwatch(\n  () => props.modelValue,\n  (newModel) => {\n    optionsList.value = optionsList.value.map((item) => ({\n      ...item,\n      dotShape: newModel.mapping[item.value]?.aes?.dotShape ?? item.dotShape,\n      color: newModel.mapping[item.value]?.aes?.color ?? item.color,\n      lineType: newModel.mapping[item.value]?.aes?.lineShape ?? item.lineType,\n    }));\n  },\n  { deep: true },\n);\nwatch(() => reordarableItems.value, (v) => {\n  const newOrder = v.map((item) => item.value);\n  if (!props.allowNullOption && props.modelValue.order.length > v.length) {\n    newOrder.push('null');\n  }\n  const orderChanged\n    = newOrder.length !== props.modelValue.order.length\n      || newOrder.some((val, idx) => val !== props.modelValue.order[idx]);\n  if (!orderChanged) return;\n  emit('update:modelValue', { ...props.modelValue, order: newOrder });\n}, { deep: true });\n</script>\n\n<template>\n  <div class=\"aes-mapping-block\">\n    <div style=\"margin: 0 24px\">\n      <div class=\"section-title\">\n        <span>{{ dataColumnLabel }}</span>\n      </div>\n      <div style=\"margin: 24px 0\">\n        <MultiselectButton\n          label=\"Color Palette \" icon=\"chevron-right\" :title=\"PALETTE_MAP[palette].title\"\n          :palette=\"palette\" @button-click=\"\n            palettesOpen = true;\n            closeForm();\n          \"\n        />\n      </div>\n      <div v-if=\"!categorical\" style=\"margin: 24px 0\">\n        <PlColorSlider\n          v-model=\"continuousMappingItems\" :colors=\"PALETTE_MAP[palette].colors\"\n          :get-color-for-percent=\"colorForPercent\" :active=\"activeValueIndex\" @active=\"setActiveElementFromColorSlider\"\n          @update:model-value=\"updateContinuousColors\"\n        />\n      </div>\n      <FormWrapper\n        v-if=\"palettesOpen\" title=\"Color Palette\" back-title=\"Color mapping\"\n        @form:close=\"palettesOpen = false\"\n      >\n        <PalettesForm :selected=\"palette\" @select=\"onPaletteSelect\" />\n      </FormWrapper>\n    </div>\n    <div v-if=\"allowReordering\" class=\"aes-settings-hint\">\n      Drag the rows to reorder\n    </div>\n    <div class=\"column-values-list\">\n      <PlElementList\n        v-model:items=\"reordarableItems\"\n        :get-item-key=\"(item) => item.value\"\n        :item-class=\"$style.discreteRow\"\n        :item-class-title=\"$style.discreteRowTitle\"\n        :disableDragging=\"!allowReordering\"\n        :disableRemoving=\"true\"\n        :disableToggling=\"true\"\n        :disablePinning=\"true\"\n      >\n        <template #item-title=\"{ item }\">\n          <DiscreteRow\n            :item=\"item\"\n            :active-value=\"activeValue\"\n            :active-aes-type=\"activeAesType\"\n            :used-aes-in-mapping=\"props.usedAesInMapping\"\n            :allow-hiding=\"allowHiding ?? false\"\n            :allow-reordering=\"allowReordering ?? false\"\n            :hidden=\"props.modelValue.hidden?.[item.value] ?? false\"\n            :palette=\"palette\"\n            :is-categorical=\"categorical\"\n            :on-aes-value-update=\"(field: string, value: string | DotShape | LineType) => onAesValueUpdate(item.value, field, value)\"\n            :on-switch-visibility=\"() => switchVisibility(item)\" :on-active-value-change=\"(v) => activeValue = v\"\n            :on-active-aes-type-change=\"(v) => activeAesType = v\" :on-close-form=\"closeForm\"\n          />\n        </template>\n      </PlElementList>\n    </div>\n  </div>\n</template>\n<style module>\n:global(.graph-maker) .discreteRow {\n  background-color: var(--color-ic-00);\n  border-color: var(--color-div-grey);\n}\n:global(.graph-maker) .discreteRow:hover {\n  --head-background: var(--color-ic-00);\n}\n:global(.graph-maker) .discreteRowTitle,\n:global(.sortable-chosen) .discreteRowTitle {\n  padding-top: 0;\n  padding-bottom: 0;\n  background-color: var(--color-ic-00);\n}\n:global(.graph-maker) .discreteRow:hover .discreteRowTitle {\n  background-color: var(--color-ic-00);\n}\n</style>\n"],"mappings":""}

package/dist/components/AesSettings/AesDataMappingDiscrete.vue.css

@@ -0,0 +1 @@
+.graph-maker ._discreteRow_1lqg1_2{background-color:var(--color-ic-00);border-color:var(--color-div-grey)}.graph-maker ._discreteRow_1lqg1_2:hover{--head-background:var(--color-ic-00)}.graph-maker ._discreteRowTitle_1lqg1_9,.sortable-chosen ._discreteRowTitle_1lqg1_9{background-color:var(--color-ic-00);padding-top:0;padding-bottom:0}.graph-maker ._discreteRow_1lqg1_2:hover ._discreteRowTitle_1lqg1_9{background-color:var(--color-ic-00)}