@milaboratories/graph-maker 1.2.5 → 1.2.7

package/dist/dataBindAes.js.map

@@ -1 +1 @@
-{"version":3,"file":"dataBindAes.js","sources":["../src/dataBindAes.ts"],"sourcesContent":["import type { InputState } from '@milaboratories/pf-plots';\nimport { scaleLinear } from 'd3-scale';\nimport type {\n  ContinuousPalette,\n  DotShape,\n  LineType,\n  Palette,\n} from './components/AesSettings/types';\nimport {\n  DEFAULT_BLACK,\n  FIXED_LINE_TYPES,\n  FIXES_DOT_SHAPES,\n  isCategorical,\n  PALETTE_MAP,\n} from './constantsAesthetic';\nimport type { AesType, ContinuousDataMappingSize, NumberRange } from './constantsCommon';\nimport type { UniqueValuesBySourceMap } from './types';\n\nexport type AestheticMappingState = Record<string, AestheticMapping>;\nexport type AestheticMapping =\n  | AestheticMappingContinuous\n  | AestheticMappingCategorical;\n\ninterface MappingRange {\n  maxValue: number | null;\n  minValue: number | null;\n}\n\n/** Mapping for continuous axes (numerical axes) */\nexport interface AestheticMappingContinuous {\n  type: 'continuous';\n  palette: ContinuousPalette;\n  range: MappingRange | null;\n  midPoint: number | null;\n  log: boolean;\n  naAes: AestheticValues;\n}\n\nexport function isAestheticMappingContinuous(v: unknown | AestheticMappingContinuous): v is AestheticMappingContinuous {\n  return v !== null && typeof v === 'object' && 'palette' in v && 'type' in v && v.type === 'continuous';\n}\n\n/** Mapping for categorical axes (string axes) */\nexport interface AestheticMappingCategorical {\n  type: 'categorical';\n  palette: Palette;\n  naAes: AestheticValues;\n  order: string[];\n  hidden?: Record<string, boolean>;\n  mapping: AestheticMappingRecord;\n}\n\nexport function isAestheticMappingCategorical(v: unknown | AestheticMappingCategorical): v is AestheticMappingCategorical {\n  return v !== null && typeof v === 'object' && 'palette' in v && 'type' in v && v.type === 'categorical';\n}\n\nexport function isAestheticMapping(v: unknown | AestheticMappingContinuous | AestheticMappingCategorical): v is AestheticMapping {\n  return isAestheticMappingCategorical(v) || isAestheticMappingContinuous(v);\n}\n\n// key - column value, colorIdx - idx of color (if palette is categorical) of percent value of colors gradient (if palette is continuous)\ntype AestheticMappingRecord = Record<\n  string | number,\n  {\n    aes: Partial<AestheticValues>;\n    colorIdx: number;\n  }\n>;\n\ninterface AestheticValues {\n  /** Number to retrieve the color from pallet, string to represent specific color as hex */\n  color: string;\n  lineShape: LineType;\n  dotShape: DotShape;\n}\n\nexport const DEFAULT_LINE_COLOR = '#110529';\nexport const DEFAULT_LINE_SHAPE: LineType = 'solid';\nexport const DEFAULT_LINE_WIDTH = 1;\nexport const DEFAULT_DOT_SHAPE: DotShape = '21'; // colored circle, shape number as in R\nexport const DEFAULT_DOT_SIZE = 3; // radius;\nexport const DEFAULT_DOT_SIZE_CANVAS = 2;\nexport const DEFAULT_DOT_RANGE: NumberRange = { min: 3, max: 10 }; // radius;\n\nexport const DEFAULT_NA_AES = {\n  color: '#ccc',\n  lineShape: DEFAULT_LINE_SHAPE as LineType,\n  dotShape: DEFAULT_DOT_SHAPE as DotShape,\n};\n\nfunction getColorScale(colors: string[]) {\n  const colorStep = 1 / (colors.length - 1);\n  return scaleLinear<string, string>()\n    .domain(colors.map((_c, idx) => idx * colorStep))\n    .range(colors);\n}\n\nexport function createCategoricalMappingFromPalette(\n  palette: Palette,\n  values: string[],\n): AestheticMappingCategorical {\n  const colors = PALETTE_MAP[palette].colors;\n  const step = values.length > 1 ? 1 / (values.length - 1) : 0;\n  const colorScale = getColorScale(colors);\n\n  const categorical = isCategorical(palette);\n  const mapping = values.reduce((res: AestheticMappingRecord, value, idx) => {\n    res[value] = {\n      colorIdx: categorical ? idx : idx * step,\n      aes: {\n        color: categorical\n          ? colors[idx % colors.length]\n          : colorScale(idx * step),\n        lineShape: FIXED_LINE_TYPES[idx % FIXED_LINE_TYPES.length],\n        dotShape: FIXES_DOT_SHAPES[idx % FIXES_DOT_SHAPES.length],\n      },\n    };\n    return res;\n  }, {});\n  return {\n    type: 'categorical',\n    palette: palette,\n    naAes: DEFAULT_NA_AES,\n    order: values,\n    hidden: {},\n    mapping,\n  };\n}\n\nexport function changePaletteInExistingCategoricalMapping(\n  newPalette: Palette,\n  currentMapping: AestheticMappingCategorical,\n): AestheticMappingCategorical {\n  const colors = PALETTE_MAP[newPalette].colors;\n  const step = currentMapping.order.length > 1 ? 1 / (currentMapping.order.length - 1) : 0;\n  const colorScale = getColorScale(colors);\n\n  const oldIsCategorical = isCategorical(currentMapping.palette);\n  const newIsCategorical = isCategorical(newPalette);\n\n  const skipIndexSaving = oldIsCategorical !== newIsCategorical;\n\n  const newMapping = currentMapping.order.reduce((res: AestheticMappingRecord, value, valueIdx) => {\n    const colorIdx = skipIndexSaving ? (newIsCategorical ? valueIdx : valueIdx * step) : currentMapping.mapping[value].colorIdx;\n    res[value] = {\n      colorIdx,\n      aes: {\n        color: newIsCategorical\n          ? colors[colorIdx % colors.length]\n          : colorScale(colorIdx),\n        lineShape: FIXED_LINE_TYPES[colorIdx % FIXED_LINE_TYPES.length],\n        dotShape: FIXES_DOT_SHAPES[colorIdx % FIXES_DOT_SHAPES.length],\n      },\n    };\n    return res;\n  }, {});\n  console.log('currentMapping', currentMapping);\n  console.log('newMapping', newMapping);\n  return { ...currentMapping, mapping: newMapping, palette: newPalette };\n}\n\nconst INPUTS_WITH_AES_MAPPINGS = [\n  'primaryGrouping', 'secondaryGrouping', // discrete charts\n  'grouping', 'shape', // scatterplot\n  'nodeColor', 'nodeShape', 'lineColor', 'heatmapAnnotation', // dendro\n];\nexport function updateDataBindAes(\n  optionsState: InputState,\n  dataBindAes: Record<string, AestheticMapping>,\n  uniqueValuesMap: UniqueValuesBySourceMap,\n) {\n  INPUTS_WITH_AES_MAPPINGS.forEach((inputName) => {\n    const selectorStates = optionsState.components[inputName as keyof InputState]?.selectorStates;\n    selectorStates?.forEach(({ selectedSource }) => {\n      const savedMapping = dataBindAes[selectedSource];\n      const entry = uniqueValuesMap[selectedSource];\n      const uniqueValues = entry?.list;\n      if (savedMapping && uniqueValues && isAestheticMappingCategorical(savedMapping)) {\n        dataBindAes[selectedSource] = updateCategoricalMapping(uniqueValues, savedMapping);\n      }\n      if (savedMapping && !uniqueValues) { // probably filters was removed and now there are no unique values, after overflow\n        delete dataBindAes[selectedSource];\n      }\n    });\n  });\n}\n\nexport function updateCategoricalMapping(\n  newUniqueValues: string[],\n  currentMapping: AestheticMappingCategorical,\n): AestheticMappingCategorical {\n  const { palette, order, mapping } = currentMapping;\n  const uniqueValuesSet = new Set(newUniqueValues);\n  const orderValuesSet = new Set(order);\n  const addedValues: string[] = newUniqueValues.filter((v) => !orderValuesSet.has(v));\n  const removedValues: string[] = order.filter((v) => !uniqueValuesSet.has(v as string));\n  if (!addedValues.length && !removedValues.length) {\n    return currentMapping;\n  }\n  const newOrder = [...order, ...addedValues].filter((v) => uniqueValuesSet.has(v as string));\n  const newMapping = { ...mapping };\n  const colors = PALETTE_MAP[palette].colors;\n  addedValues.forEach((v, idx) => {\n    const index = idx + (order.length ? mapping[order[order.length - 1]].colorIdx + 1 : 0);\n    newMapping[v] = {\n      colorIdx: index,\n      aes: {\n        color: colors[index % colors.length],\n        lineShape: FIXED_LINE_TYPES[index % FIXED_LINE_TYPES.length],\n        dotShape: FIXES_DOT_SHAPES[index % FIXES_DOT_SHAPES.length],\n      },\n    };\n  });\n  removedValues.forEach((v) => {\n    if (newMapping[v]) {\n      delete newMapping[v];\n    }\n  });\n\n  return { ...currentMapping, order: newOrder, mapping: newMapping } as AestheticMappingCategorical;\n}\nexport function createContinuousMappingFromPalette(palette: ContinuousPalette): AestheticMappingContinuous {\n  return {\n    type: 'continuous',\n    palette: palette,\n    naAes: DEFAULT_NA_AES,\n    range: null,\n    midPoint: null,\n    log: false,\n  };\n}\n\nexport function createDefaultMapping(\n  values: string[],\n  palette: Palette,\n): AestheticMappingCategorical {\n  return createCategoricalMappingFromPalette(palette, values);\n}\n\nexport function createDefaultContinuousMapping(columnId: string): ContinuousDataMappingSize {\n  return {\n    column: columnId,\n    range: DEFAULT_DOT_RANGE,\n  };\n}\n\nexport function getChartSettingsInheritedAes(\n  uniqueValuesData: UniqueValuesBySourceMap,\n  savedMapping: AestheticMapping | undefined,\n  sourceId: string | null,\n  usedAesInMapping: Record<AesType, boolean>,\n  palette: Palette,\n) {\n  if (savedMapping?.type === 'continuous') {\n    return { inheritedAes: {} };\n  }\n  const entry = sourceId ? uniqueValuesData[sourceId] : null;\n  const uniqueValues = entry?.list ?? [];\n  const mapping = savedMapping ?? createDefaultMapping(uniqueValues, palette);\n  if (!mapping.order.length) {\n    return { inheritedAes: {} };\n  }\n  return {\n    order: mapping.order.filter((v) => !mapping.hidden?.[v]),\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    inheritedAes: mapping.order.reduce((res: Record<string, any>, value) => { // TODO: remove any\n      const aes = mapping.mapping[value].aes;\n      res[value] = {};\n      if (usedAesInMapping.fill) {\n        res[value].fillColor = aes.color;\n        res[value].dotFill = aes.color;\n      }\n      if (usedAesInMapping.stroke) {\n        res[value].lineColor = aes.color;\n      }\n      if (usedAesInMapping.dotShape) {\n        res[value].dotShape = aes.dotShape;\n      }\n      if (usedAesInMapping.lineType) {\n        res[value].lineShape = aes.lineShape;\n      }\n      return res;\n    }, {}),\n  };\n}\n\nexport function getScatterplotAes(\n  selectedSource: string,\n  uniqueValuesData: UniqueValuesBySourceMap,\n  dataBindAes: AestheticMappingState,\n  palette: Palette,\n) {\n  const savedMapping = dataBindAes[selectedSource];\n  if (savedMapping && !isAestheticMappingCategorical(savedMapping)) {\n    return { order: [], inheritedAes: {} };\n  }\n  const entry = uniqueValuesData[selectedSource];\n  const uniqueValues = entry?.list ?? [];\n  const mapping = savedMapping ?? createDefaultMapping(uniqueValues, palette);\n  return {\n    order: mapping.order,\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    inheritedAes: mapping.order.reduce((res: Record<string, any>, value) => { // TODO: remove any\n      const aes = mapping.mapping[value].aes;\n      res[value] = {\n        fillColor: aes.color,\n        lineColor: aes.color,\n        dotFill: aes.color,\n        dotShape: aes.dotShape,\n        dotSize: DEFAULT_DOT_SIZE,\n        lineWidth: DEFAULT_LINE_WIDTH,\n      };\n      return res;\n    }, {}),\n  };\n}\n\nexport function getHistogramAes(\n  selectedSource: string,\n  uniqueValuesData: UniqueValuesBySourceMap,\n  dataBindAes: AestheticMappingState,\n  palette: Palette,\n) {\n  const savedMapping = dataBindAes[selectedSource];\n  if (savedMapping && !isAestheticMappingCategorical(savedMapping)) {\n    return {};\n  }\n  const entry = uniqueValuesData[selectedSource];\n  const uniqueValues = entry?.list ?? [];\n  const mapping = savedMapping ?? createDefaultMapping(uniqueValues, palette);\n  if (!mapping.order.length) {\n    return { order: [], inheritedAes: {} };\n  }\n  return {\n    order: mapping.order.filter((v) => !mapping.hidden?.[v]),\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    inheritedAes: mapping.order.reduce((res: Record<string, any>, value) => { // TODO: remove any\n      const aes = mapping.mapping[value].aes;\n      res[value] = {\n        fillColor: aes.color,\n        lineColor: DEFAULT_BLACK,\n        dotFill: DEFAULT_BLACK,\n        dotShape: DEFAULT_DOT_SHAPE,\n        dotSize: DEFAULT_DOT_SIZE,\n        lineWidth: DEFAULT_LINE_WIDTH,\n      };\n      return res;\n    }, {}),\n  };\n}\n\nexport function getDendroAes(\n  selectedSource: string,\n  uniqueValuesData: UniqueValuesBySourceMap,\n  dataBindAes: AestheticMappingState,\n  field: keyof AestheticValues,\n  palette: Palette,\n): Record<string, AestheticValues[keyof AestheticValues]> {\n  const entry = uniqueValuesData[selectedSource];\n  const uniqueValues = entry?.list ?? [];\n  const mapping\n    = dataBindAes[selectedSource] as AestheticMappingCategorical\n      ?? createDefaultMapping(uniqueValues, palette);\n  return mapping.order.reduce(\n    (res: Record<string, AestheticValues[keyof AestheticValues]>, value) => {\n      const aes = mapping.mapping[value].aes;\n      res[value] = aes[field] as string;\n      return res;\n    },\n    {},\n  );\n}\n"],"names":["isAestheticMappingContinuous","v","isAestheticMappingCategorical","isAestheticMapping","DEFAULT_LINE_COLOR","DEFAULT_LINE_SHAPE","DEFAULT_LINE_WIDTH","DEFAULT_DOT_SHAPE","DEFAULT_DOT_SIZE","DEFAULT_DOT_SIZE_CANVAS","DEFAULT_DOT_RANGE","DEFAULT_NA_AES","getColorScale","colors","colorStep","scaleLinear","_c","idx","createCategoricalMappingFromPalette","palette","values","PALETTE_MAP","step","colorScale","categorical","isCategorical","mapping","res","value","FIXED_LINE_TYPES","FIXES_DOT_SHAPES","changePaletteInExistingCategoricalMapping","newPalette","currentMapping","oldIsCategorical","newIsCategorical","skipIndexSaving","newMapping","valueIdx","colorIdx","INPUTS_WITH_AES_MAPPINGS","updateDataBindAes","optionsState","dataBindAes","uniqueValuesMap","inputName","selectorStates","_a","selectedSource","savedMapping","entry","uniqueValues","updateCategoricalMapping","newUniqueValues","order","uniqueValuesSet","orderValuesSet","addedValues","removedValues","newOrder","index","createContinuousMappingFromPalette","createDefaultMapping","getChartSettingsInheritedAes","uniqueValuesData","sourceId","usedAesInMapping","aes","getScatterplotAes","getHistogramAes","DEFAULT_BLACK","getDendroAes","field"],"mappings":";;AAsCO,SAASA,EAA6BC,GAA0E;AACrH,SAAOA,MAAM,QAAQ,OAAOA,KAAM,YAAY,aAAaA,KAAK,UAAUA,KAAKA,EAAE,SAAS;AAC5F;AAYO,SAASC,EAA8BD,GAA4E;AACxH,SAAOA,MAAM,QAAQ,OAAOA,KAAM,YAAY,aAAaA,KAAK,UAAUA,KAAKA,EAAE,SAAS;AAC5F;AAEO,SAASE,EAAmBF,GAA8F;AAC/H,SAAOC,EAA8BD,CAAC,KAAKD,EAA6BC,CAAC;AAC3E;AAkBO,MAAMG,IAAqB,WACrBC,IAA+B,SAC/BC,IAAqB,GACrBC,IAA8B,MAC9BC,IAAmB,GACnBC,IAA0B,GAC1BC,IAAiC,EAAE,KAAK,GAAG,KAAK,GAAA,GAEhDC,IAAiB;AAAA,EAC5B,OAAO;AAAA,EACP,WAAWN;AAAA,EACX,UAAUE;AACZ;AAEA,SAASK,EAAcC,GAAkB;AACvC,QAAMC,IAAY,KAAKD,EAAO,SAAS;AACvC,SAAOE,EAAA,EACJ,OAAOF,EAAO,IAAI,CAACG,GAAIC,MAAQA,IAAMH,CAAS,CAAC,EAC/C,MAAMD,CAAM;AACjB;AAEO,SAASK,EACdC,GACAC,GAC6B;AAC7B,QAAMP,IAASQ,EAAYF,CAAO,EAAE,QAC9BG,IAAOF,EAAO,SAAS,IAAI,KAAKA,EAAO,SAAS,KAAK,GACrDG,IAAaX,EAAcC,CAAM,GAEjCW,IAAcC,EAAcN,CAAO,GACnCO,IAAUN,EAAO,OAAO,CAACO,GAA6BC,GAAOX,OACjEU,EAAIC,CAAK,IAAI;AAAA,IACX,UAAUJ,IAAcP,IAAMA,IAAMK;AAAA,IACpC,KAAK;AAAA,MACH,OAAOE,IACHX,EAAOI,IAAMJ,EAAO,MAAM,IAC1BU,EAAWN,IAAMK,CAAI;AAAA,MACzB,WAAWO,EAAiBZ,IAAMY,EAAiB,MAAM;AAAA,MACzD,UAAUC,EAAiBb,IAAMa,EAAiB,MAAM;AAAA,IAAA;AAAA,EAC1D,GAEKH,IACN,CAAA,CAAE;AACL,SAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAAR;AAAA,IACA,OAAOR;AAAA,IACP,OAAOS;AAAA,IACP,QAAQ,CAAA;AAAA,IACR,SAAAM;AAAA,EAAA;AAEJ;AAEO,SAASK,EACdC,GACAC,GAC6B;AAC7B,QAAMpB,IAASQ,EAAYW,CAAU,EAAE,QACjCV,IAAOW,EAAe,MAAM,SAAS,IAAI,KAAKA,EAAe,MAAM,SAAS,KAAK,GACjFV,IAAaX,EAAcC,CAAM,GAEjCqB,IAAmBT,EAAcQ,EAAe,OAAO,GACvDE,IAAmBV,EAAcO,CAAU,GAE3CI,IAAkBF,MAAqBC,GAEvCE,IAAaJ,EAAe,MAAM,OAAO,CAACN,GAA6BC,GAAOU,MAAa;AAC/F,UAAMC,IAAWH,IAAmBD,IAAmBG,IAAWA,IAAWhB,IAAQW,EAAe,QAAQL,CAAK,EAAE;AACnH,WAAAD,EAAIC,CAAK,IAAI;AAAA,MACX,UAAAW;AAAA,MACA,KAAK;AAAA,QACH,OAAOJ,IACHtB,EAAO0B,IAAW1B,EAAO,MAAM,IAC/BU,EAAWgB,CAAQ;AAAA,QACvB,WAAWV,EAAiBU,IAAWV,EAAiB,MAAM;AAAA,QAC9D,UAAUC,EAAiBS,IAAWT,EAAiB,MAAM;AAAA,MAAA;AAAA,IAC/D,GAEKH;AAAA,EACT,GAAG,CAAA,CAAE;AACL,iBAAQ,IAAI,kBAAkBM,CAAc,GAC5C,QAAQ,IAAI,cAAcI,CAAU,GAC7B,EAAE,GAAGJ,GAAgB,SAASI,GAAY,SAASL,EAAA;AAC5D;AAEA,MAAMQ,IAA2B;AAAA,EAC/B;AAAA,EAAmB;AAAA;AAAA,EACnB;AAAA,EAAY;AAAA;AAAA,EACZ;AAAA,EAAa;AAAA,EAAa;AAAA,EAAa;AAAA;AACzC;AACO,SAASC,EACdC,GACAC,GACAC,GACA;AACA,EAAAJ,EAAyB,QAAQ,CAACK,MAAc;;AAC9C,UAAMC,KAAiBC,IAAAL,EAAa,WAAWG,CAA6B,MAArD,gBAAAE,EAAwD;AAC/E,IAAAD,KAAA,QAAAA,EAAgB,QAAQ,CAAC,EAAE,gBAAAE,QAAqB;AAC9C,YAAMC,IAAeN,EAAYK,CAAc,GACzCE,IAAQN,EAAgBI,CAAc,GACtCG,IAAeD,KAAA,gBAAAA,EAAO;AAC5B,MAAID,KAAgBE,KAAgBjD,EAA8B+C,CAAY,MAC5EN,EAAYK,CAAc,IAAII,EAAyBD,GAAcF,CAAY,IAE/EA,KAAgB,CAACE,KACnB,OAAOR,EAAYK,CAAc;AAAA,IAErC;AAAA,EACF,CAAC;AACH;AAEO,SAASI,EACdC,GACApB,GAC6B;AAC7B,QAAM,EAAE,SAAAd,GAAS,OAAAmC,GAAO,SAAA5B,EAAA,IAAYO,GAC9BsB,IAAkB,IAAI,IAAIF,CAAe,GACzCG,IAAiB,IAAI,IAAIF,CAAK,GAC9BG,IAAwBJ,EAAgB,OAAO,CAACpD,MAAM,CAACuD,EAAe,IAAIvD,CAAC,CAAC,GAC5EyD,IAA0BJ,EAAM,OAAO,CAACrD,MAAM,CAACsD,EAAgB,IAAItD,CAAW,CAAC;AACrF,MAAI,CAACwD,EAAY,UAAU,CAACC,EAAc;AACxC,WAAOzB;AAET,QAAM0B,IAAW,CAAC,GAAGL,GAAO,GAAGG,CAAW,EAAE,OAAO,CAACxD,MAAMsD,EAAgB,IAAItD,CAAW,CAAC,GACpFoC,IAAa,EAAE,GAAGX,EAAA,GAClBb,IAASQ,EAAYF,CAAO,EAAE;AACpC,SAAAsC,EAAY,QAAQ,CAACxD,GAAGgB,MAAQ;AAC9B,UAAM2C,IAAQ3C,KAAOqC,EAAM,SAAS5B,EAAQ4B,EAAMA,EAAM,SAAS,CAAC,CAAC,EAAE,WAAW,IAAI;AACpF,IAAAjB,EAAWpC,CAAC,IAAI;AAAA,MACd,UAAU2D;AAAA,MACV,KAAK;AAAA,QACH,OAAO/C,EAAO+C,IAAQ/C,EAAO,MAAM;AAAA,QACnC,WAAWgB,EAAiB+B,IAAQ/B,EAAiB,MAAM;AAAA,QAC3D,UAAUC,EAAiB8B,IAAQ9B,EAAiB,MAAM;AAAA,MAAA;AAAA,IAC5D;AAAA,EAEJ,CAAC,GACD4B,EAAc,QAAQ,CAACzD,MAAM;AAC3B,IAAIoC,EAAWpC,CAAC,KACd,OAAOoC,EAAWpC,CAAC;AAAA,EAEvB,CAAC,GAEM,EAAE,GAAGgC,GAAgB,OAAO0B,GAAU,SAAStB,EAAA;AACxD;AACO,SAASwB,EAAmC1C,GAAwD;AACzG,SAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAAA;AAAA,IACA,OAAOR;AAAA,IACP,OAAO;AAAA,IACP,UAAU;AAAA,IACV,KAAK;AAAA,EAAA;AAET;AAEO,SAASmD,EACd1C,GACAD,GAC6B;AAC7B,SAAOD,EAAoCC,GAASC,CAAM;AAC5D;AASO,SAAS2C,EACdC,GACAf,GACAgB,GACAC,GACA/C,GACA;AACA,OAAI8B,KAAA,gBAAAA,EAAc,UAAS;AACzB,WAAO,EAAE,cAAc,GAAC;AAE1B,QAAMC,IAAQe,IAAWD,EAAiBC,CAAQ,IAAI,MAChDd,KAAeD,KAAA,gBAAAA,EAAO,SAAQ,CAAA,GAC9BxB,IAAUuB,KAAgBa,EAAqBX,GAAchC,CAAO;AAC1E,SAAKO,EAAQ,MAAM,SAGZ;AAAA,IACL,OAAOA,EAAQ,MAAM,OAAO,CAACzB;;AAAM,gBAAC8C,IAAArB,EAAQ,WAAR,QAAAqB,EAAiB9C;AAAA,KAAE;AAAA;AAAA,IAEvD,cAAcyB,EAAQ,MAAM,OAAO,CAACC,GAA0BC,MAAU;AACtE,YAAMuC,IAAMzC,EAAQ,QAAQE,CAAK,EAAE;AACnC,aAAAD,EAAIC,CAAK,IAAI,CAAA,GACTsC,EAAiB,SACnBvC,EAAIC,CAAK,EAAE,YAAYuC,EAAI,OAC3BxC,EAAIC,CAAK,EAAE,UAAUuC,EAAI,QAEvBD,EAAiB,WACnBvC,EAAIC,CAAK,EAAE,YAAYuC,EAAI,QAEzBD,EAAiB,aACnBvC,EAAIC,CAAK,EAAE,WAAWuC,EAAI,WAExBD,EAAiB,aACnBvC,EAAIC,CAAK,EAAE,YAAYuC,EAAI,YAEtBxC;AAAA,IACT,GAAG,CAAA,CAAE;AAAA,EAAA,IAtBE,EAAE,cAAc,GAAC;AAwB5B;AAEO,SAASyC,EACdpB,GACAgB,GACArB,GACAxB,GACA;AACA,QAAM8B,IAAeN,EAAYK,CAAc;AAC/C,MAAIC,KAAgB,CAAC/C,EAA8B+C,CAAY;AAC7D,WAAO,EAAE,OAAO,IAAI,cAAc,CAAA,EAAC;AAErC,QAAMC,IAAQc,EAAiBhB,CAAc,GACvCG,KAAeD,KAAA,gBAAAA,EAAO,SAAQ,CAAA,GAC9BxB,IAAUuB,KAAgBa,EAAqBX,GAAchC,CAAO;AAC1E,SAAO;AAAA,IACL,OAAOO,EAAQ;AAAA;AAAA,IAEf,cAAcA,EAAQ,MAAM,OAAO,CAACC,GAA0BC,MAAU;AACtE,YAAMuC,IAAMzC,EAAQ,QAAQE,CAAK,EAAE;AACnC,aAAAD,EAAIC,CAAK,IAAI;AAAA,QACX,WAAWuC,EAAI;AAAA,QACf,WAAWA,EAAI;AAAA,QACf,SAASA,EAAI;AAAA,QACb,UAAUA,EAAI;AAAA,QACd,SAAS3D;AAAA,QACT,WAAWF;AAAA,MAAA,GAENqB;AAAA,IACT,GAAG,CAAA,CAAE;AAAA,EAAA;AAET;AAEO,SAAS0C,EACdrB,GACAgB,GACArB,GACAxB,GACA;AACA,QAAM8B,IAAeN,EAAYK,CAAc;AAC/C,MAAIC,KAAgB,CAAC/C,EAA8B+C,CAAY;AAC7D,WAAO,CAAA;AAET,QAAMC,IAAQc,EAAiBhB,CAAc,GACvCG,KAAeD,KAAA,gBAAAA,EAAO,SAAQ,CAAA,GAC9BxB,IAAUuB,KAAgBa,EAAqBX,GAAchC,CAAO;AAC1E,SAAKO,EAAQ,MAAM,SAGZ;AAAA,IACL,OAAOA,EAAQ,MAAM,OAAO,CAACzB;;AAAM,gBAAC8C,IAAArB,EAAQ,WAAR,QAAAqB,EAAiB9C;AAAA,KAAE;AAAA;AAAA,IAEvD,cAAcyB,EAAQ,MAAM,OAAO,CAACC,GAA0BC,MAAU;AACtE,YAAMuC,IAAMzC,EAAQ,QAAQE,CAAK,EAAE;AACnC,aAAAD,EAAIC,CAAK,IAAI;AAAA,QACX,WAAWuC,EAAI;AAAA,QACf,WAAWG;AAAA,QACX,SAASA;AAAA,QACT,UAAU/D;AAAA,QACV,SAASC;AAAA,QACT,WAAWF;AAAA,MAAA,GAENqB;AAAA,IACT,GAAG,CAAA,CAAE;AAAA,EAAA,IAhBE,EAAE,OAAO,IAAI,cAAc,CAAA,EAAC;AAkBvC;AAEO,SAAS4C,EACdvB,GACAgB,GACArB,GACA6B,GACArD,GACwD;AACxD,QAAM+B,IAAQc,EAAiBhB,CAAc,GACvCG,KAAeD,KAAA,gBAAAA,EAAO,SAAQ,CAAA,GAC9BxB,IACFiB,EAAYK,CAAc,KACvBc,EAAqBX,GAAchC,CAAO;AACjD,SAAOO,EAAQ,MAAM;AAAA,IACnB,CAACC,GAA6DC,MAAU;AACtE,YAAMuC,IAAMzC,EAAQ,QAAQE,CAAK,EAAE;AACnC,aAAAD,EAAIC,CAAK,IAAIuC,EAAIK,CAAK,GACf7C;AAAA,IACT;AAAA,IACA,CAAA;AAAA,EAAC;AAEL;"}
+{"version":3,"file":"dataBindAes.js","names":[],"sources":["../src/dataBindAes.ts"],"sourcesContent":["import type { InputState } from '@milaboratories/pf-plots';\nimport { scaleLinear } from 'd3-scale';\nimport type {\n  ContinuousPalette,\n  DotShape,\n  LineType,\n  Palette,\n} from './components/AesSettings/types';\nimport {\n  DEFAULT_BLACK,\n  FIXED_LINE_TYPES,\n  FIXES_DOT_SHAPES,\n  isCategorical,\n  PALETTE_MAP,\n} from './constantsAesthetic';\nimport type { AesType, ContinuousDataMappingSize, NumberRange } from './constantsCommon';\nimport type { UniqueValuesBySourceMap } from './types';\n\nexport type AestheticMappingState = Record<string, AestheticMapping>;\nexport type AestheticMapping =\n  | AestheticMappingContinuous\n  | AestheticMappingCategorical;\n\ninterface MappingRange {\n  maxValue: number | null;\n  minValue: number | null;\n}\n\n/** Mapping for continuous axes (numerical axes) */\nexport interface AestheticMappingContinuous {\n  type: 'continuous';\n  palette: ContinuousPalette;\n  range: MappingRange | null;\n  midPoint: number | null;\n  log: boolean;\n  naAes: AestheticValues;\n}\n\nexport function isAestheticMappingContinuous(v: unknown | AestheticMappingContinuous): v is AestheticMappingContinuous {\n  return v !== null && typeof v === 'object' && 'palette' in v && 'type' in v && v.type === 'continuous';\n}\n\n/** Mapping for categorical axes (string axes) */\nexport interface AestheticMappingCategorical {\n  type: 'categorical';\n  palette: Palette;\n  naAes: AestheticValues;\n  order: string[];\n  hidden?: Record<string, boolean>;\n  mapping: AestheticMappingRecord;\n}\n\nexport function isAestheticMappingCategorical(v: unknown | AestheticMappingCategorical): v is AestheticMappingCategorical {\n  return v !== null && typeof v === 'object' && 'palette' in v && 'type' in v && v.type === 'categorical';\n}\n\nexport function isAestheticMapping(v: unknown | AestheticMappingContinuous | AestheticMappingCategorical): v is AestheticMapping {\n  return isAestheticMappingCategorical(v) || isAestheticMappingContinuous(v);\n}\n\n// key - column value, colorIdx - idx of color (if palette is categorical) of percent value of colors gradient (if palette is continuous)\ntype AestheticMappingRecord = Record<\n  string | number,\n  {\n    aes: Partial<AestheticValues>;\n    colorIdx: number;\n  }\n>;\n\ninterface AestheticValues {\n  /** Number to retrieve the color from pallet, string to represent specific color as hex */\n  color: string;\n  lineShape: LineType;\n  dotShape: DotShape;\n}\n\nexport const DEFAULT_LINE_COLOR = '#110529';\nexport const DEFAULT_LINE_SHAPE: LineType = 'solid';\nexport const DEFAULT_LINE_WIDTH = 1;\nexport const DEFAULT_DOT_SHAPE: DotShape = '21'; // colored circle, shape number as in R\nexport const DEFAULT_DOT_SIZE = 3; // radius;\nexport const DEFAULT_DOT_SIZE_CANVAS = 2;\nexport const DEFAULT_DOT_RANGE: NumberRange = { min: 3, max: 10 }; // radius;\n\nexport const DEFAULT_NA_AES = {\n  color: '#ccc',\n  lineShape: DEFAULT_LINE_SHAPE as LineType,\n  dotShape: DEFAULT_DOT_SHAPE as DotShape,\n};\n\nfunction getColorScale(colors: string[]) {\n  const colorStep = 1 / (colors.length - 1);\n  return scaleLinear<string, string>()\n    .domain(colors.map((_c, idx) => idx * colorStep))\n    .range(colors);\n}\n\nexport function createCategoricalMappingFromPalette(\n  palette: Palette,\n  values: string[],\n): AestheticMappingCategorical {\n  const colors = PALETTE_MAP[palette].colors;\n  const step = values.length > 1 ? 1 / (values.length - 1) : 0;\n  const colorScale = getColorScale(colors);\n\n  const categorical = isCategorical(palette);\n  const mapping = values.reduce((res: AestheticMappingRecord, value, idx) => {\n    res[value] = {\n      colorIdx: categorical ? idx : idx * step,\n      aes: {\n        color: categorical\n          ? colors[idx % colors.length]\n          : colorScale(idx * step),\n        lineShape: FIXED_LINE_TYPES[idx % FIXED_LINE_TYPES.length],\n        dotShape: FIXES_DOT_SHAPES[idx % FIXES_DOT_SHAPES.length],\n      },\n    };\n    return res;\n  }, {});\n  return {\n    type: 'categorical',\n    palette: palette,\n    naAes: DEFAULT_NA_AES,\n    order: values,\n    hidden: {},\n    mapping,\n  };\n}\n\nexport function changePaletteInExistingCategoricalMapping(\n  newPalette: Palette,\n  currentMapping: AestheticMappingCategorical,\n): AestheticMappingCategorical {\n  const colors = PALETTE_MAP[newPalette].colors;\n  const step = currentMapping.order.length > 1 ? 1 / (currentMapping.order.length - 1) : 0;\n  const colorScale = getColorScale(colors);\n\n  const oldIsCategorical = isCategorical(currentMapping.palette);\n  const newIsCategorical = isCategorical(newPalette);\n\n  const skipIndexSaving = oldIsCategorical !== newIsCategorical;\n\n  const newMapping = currentMapping.order.reduce((res: AestheticMappingRecord, value, valueIdx) => {\n    const colorIdx = skipIndexSaving ? (newIsCategorical ? valueIdx : valueIdx * step) : currentMapping.mapping[value].colorIdx;\n    res[value] = {\n      colorIdx,\n      aes: {\n        color: newIsCategorical\n          ? colors[colorIdx % colors.length]\n          : colorScale(colorIdx),\n        lineShape: FIXED_LINE_TYPES[colorIdx % FIXED_LINE_TYPES.length],\n        dotShape: FIXES_DOT_SHAPES[colorIdx % FIXES_DOT_SHAPES.length],\n      },\n    };\n    return res;\n  }, {});\n  console.log('currentMapping', currentMapping);\n  console.log('newMapping', newMapping);\n  return { ...currentMapping, mapping: newMapping, palette: newPalette };\n}\n\nconst INPUTS_WITH_AES_MAPPINGS = [\n  'primaryGrouping', 'secondaryGrouping', // discrete charts\n  'grouping', 'shape', // scatterplot\n  'nodeColor', 'nodeShape', 'lineColor', 'heatmapAnnotation', // dendro\n];\nexport function updateDataBindAes(\n  optionsState: InputState,\n  dataBindAes: Record<string, AestheticMapping>,\n  uniqueValuesMap: UniqueValuesBySourceMap,\n) {\n  INPUTS_WITH_AES_MAPPINGS.forEach((inputName) => {\n    const selectorStates = optionsState.components[inputName as keyof InputState]?.selectorStates;\n    selectorStates?.forEach(({ selectedSource }) => {\n      const savedMapping = dataBindAes[selectedSource];\n      const entry = uniqueValuesMap[selectedSource];\n      const uniqueValues = entry?.list;\n      if (savedMapping && uniqueValues && isAestheticMappingCategorical(savedMapping)) {\n        dataBindAes[selectedSource] = updateCategoricalMapping(uniqueValues, savedMapping);\n      }\n      if (savedMapping && !uniqueValues) { // probably filters was removed and now there are no unique values, after overflow\n        delete dataBindAes[selectedSource];\n      }\n    });\n  });\n}\n\nexport function updateCategoricalMapping(\n  newUniqueValues: string[],\n  currentMapping: AestheticMappingCategorical,\n): AestheticMappingCategorical {\n  const { palette, order, mapping } = currentMapping;\n  const uniqueValuesSet = new Set(newUniqueValues);\n  const orderValuesSet = new Set(order);\n  const addedValues: string[] = newUniqueValues.filter((v) => !orderValuesSet.has(v));\n  const removedValues: string[] = order.filter((v) => !uniqueValuesSet.has(v as string));\n  if (!addedValues.length && !removedValues.length) {\n    return currentMapping;\n  }\n  const newOrder = [...order, ...addedValues].filter((v) => uniqueValuesSet.has(v as string));\n  const newMapping = { ...mapping };\n  const colors = PALETTE_MAP[palette].colors;\n  addedValues.forEach((v, idx) => {\n    const index = idx + (order.length ? mapping[order[order.length - 1]].colorIdx + 1 : 0);\n    newMapping[v] = {\n      colorIdx: index,\n      aes: {\n        color: colors[index % colors.length],\n        lineShape: FIXED_LINE_TYPES[index % FIXED_LINE_TYPES.length],\n        dotShape: FIXES_DOT_SHAPES[index % FIXES_DOT_SHAPES.length],\n      },\n    };\n  });\n  removedValues.forEach((v) => {\n    if (newMapping[v]) {\n      delete newMapping[v];\n    }\n  });\n\n  return { ...currentMapping, order: newOrder, mapping: newMapping } as AestheticMappingCategorical;\n}\nexport function createContinuousMappingFromPalette(palette: ContinuousPalette): AestheticMappingContinuous {\n  return {\n    type: 'continuous',\n    palette: palette,\n    naAes: DEFAULT_NA_AES,\n    range: null,\n    midPoint: null,\n    log: false,\n  };\n}\n\nexport function createDefaultMapping(\n  values: string[],\n  palette: Palette,\n): AestheticMappingCategorical {\n  return createCategoricalMappingFromPalette(palette, values);\n}\n\nexport function createDefaultContinuousMapping(columnId: string): ContinuousDataMappingSize {\n  return {\n    column: columnId,\n    range: DEFAULT_DOT_RANGE,\n  };\n}\n\nexport function getChartSettingsInheritedAes(\n  uniqueValuesData: UniqueValuesBySourceMap,\n  savedMapping: AestheticMapping | undefined,\n  sourceId: string | null,\n  usedAesInMapping: Record<AesType, boolean>,\n  palette: Palette,\n) {\n  if (savedMapping?.type === 'continuous') {\n    return { inheritedAes: {} };\n  }\n  const entry = sourceId ? uniqueValuesData[sourceId] : null;\n  const uniqueValues = entry?.list ?? [];\n  const mapping = savedMapping ?? createDefaultMapping(uniqueValues, palette);\n  if (!mapping.order.length) {\n    return { inheritedAes: {} };\n  }\n  return {\n    order: mapping.order.filter((v) => !mapping.hidden?.[v]),\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    inheritedAes: mapping.order.reduce((res: Record<string, any>, value) => { // TODO: remove any\n      const aes = mapping.mapping[value].aes;\n      res[value] = {};\n      if (usedAesInMapping.fill) {\n        res[value].fillColor = aes.color;\n        res[value].dotFill = aes.color;\n      }\n      if (usedAesInMapping.stroke) {\n        res[value].lineColor = aes.color;\n      }\n      if (usedAesInMapping.dotShape) {\n        res[value].dotShape = aes.dotShape;\n      }\n      if (usedAesInMapping.lineType) {\n        res[value].lineShape = aes.lineShape;\n      }\n      return res;\n    }, {}),\n  };\n}\n\nexport function getScatterplotAes(\n  selectedSource: string,\n  uniqueValuesData: UniqueValuesBySourceMap,\n  dataBindAes: AestheticMappingState,\n  palette: Palette,\n) {\n  const savedMapping = dataBindAes[selectedSource];\n  if (savedMapping && !isAestheticMappingCategorical(savedMapping)) {\n    return { order: [], inheritedAes: {} };\n  }\n  const entry = uniqueValuesData[selectedSource];\n  const uniqueValues = entry?.list ?? [];\n  const mapping = savedMapping ?? createDefaultMapping(uniqueValues, palette);\n  return {\n    order: mapping.order,\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    inheritedAes: mapping.order.reduce((res: Record<string, any>, value) => { // TODO: remove any\n      const aes = mapping.mapping[value].aes;\n      res[value] = {\n        fillColor: aes.color,\n        lineColor: aes.color,\n        dotFill: aes.color,\n        dotShape: aes.dotShape,\n        dotSize: DEFAULT_DOT_SIZE,\n        lineWidth: DEFAULT_LINE_WIDTH,\n      };\n      return res;\n    }, {}),\n  };\n}\n\nexport function getHistogramAes(\n  selectedSource: string,\n  uniqueValuesData: UniqueValuesBySourceMap,\n  dataBindAes: AestheticMappingState,\n  palette: Palette,\n) {\n  const savedMapping = dataBindAes[selectedSource];\n  if (savedMapping && !isAestheticMappingCategorical(savedMapping)) {\n    return {};\n  }\n  const entry = uniqueValuesData[selectedSource];\n  const uniqueValues = entry?.list ?? [];\n  const mapping = savedMapping ?? createDefaultMapping(uniqueValues, palette);\n  if (!mapping.order.length) {\n    return { order: [], inheritedAes: {} };\n  }\n  return {\n    order: mapping.order.filter((v) => !mapping.hidden?.[v]),\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    inheritedAes: mapping.order.reduce((res: Record<string, any>, value) => { // TODO: remove any\n      const aes = mapping.mapping[value].aes;\n      res[value] = {\n        fillColor: aes.color,\n        lineColor: DEFAULT_BLACK,\n        dotFill: DEFAULT_BLACK,\n        dotShape: DEFAULT_DOT_SHAPE,\n        dotSize: DEFAULT_DOT_SIZE,\n        lineWidth: DEFAULT_LINE_WIDTH,\n      };\n      return res;\n    }, {}),\n  };\n}\n\nexport function getDendroAes(\n  selectedSource: string,\n  uniqueValuesData: UniqueValuesBySourceMap,\n  dataBindAes: AestheticMappingState,\n  field: keyof AestheticValues,\n  palette: Palette,\n): Record<string, AestheticValues[keyof AestheticValues]> {\n  const entry = uniqueValuesData[selectedSource];\n  const uniqueValues = entry?.list ?? [];\n  const mapping\n    = dataBindAes[selectedSource] as AestheticMappingCategorical\n      ?? createDefaultMapping(uniqueValues, palette);\n  return mapping.order.reduce(\n    (res: Record<string, AestheticValues[keyof AestheticValues]>, value) => {\n      const aes = mapping.mapping[value].aes;\n      res[value] = aes[field] as string;\n      return res;\n    },\n    {},\n  );\n}\n"],"mappings":"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"}

package/dist/forms/AnnotationsForm.js

@@ -0,0 +1,13 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import { createElementBlock as t, openBlock as n, renderSlot as r } from "vue";
+var i = {};
+function a(e, i) {
+	return n(), t("div", {
+		class: "annotations-form",
+		onClick: i[0] ||= (e) => e.stopPropagation()
+	}, [r(e.$slots, "default")]);
+}
+var o = /* @__PURE__ */ e(i, [["render", a]]);
+export { o as default };
+
+//# sourceMappingURL=AnnotationsForm.js.map

package/dist/forms/AnnotationsForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationsForm.js","names":[],"sources":["../../src/forms/AnnotationsForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n\n</script>\n\n<template>\n  <div class=\"annotations-form\" @click=\"(e) => e.stopPropagation()\">\n    <slot/>\n  </div>\n</template>\n"],"mappings":";;;;aAKE,EAEM,OAAA;EAFD,OAAM;EAAoB,SAAK,AAAA,EAAA,QAAG,MAAM,EAAE,iBAAe;KAC5D,EAAO,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/forms/AxesSettingsForm/BubbleAxesSettingsForm.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BubbleAxesSettingsForm.js","names":[],"sources":["../../../src/forms/AxesSettingsForm/BubbleAxesSettingsForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Slider, PlCheckbox, PlNumberField } from '@platforma-sdk/ui-vue';\nimport { useStore } from '../../store';\nimport CollapsableBlock from '../../components/CollapsableBlock.vue';\nimport Right from '../../icons/Right.vue';\nimport Down from '../../icons/Down.vue';\nimport { PlTextField, PlBtnGroup } from '@platforma-sdk/ui-vue';\nimport BtnIconGroup from '../../components/BtnIconGroup.vue';\nimport AlignLeft from '../../icons/AlignLeft.vue';\nimport AlignCenter from '../../icons/AlignCenter.vue';\nimport AlignRight from '../../icons/AlignRight.vue';\nimport FrameFull from '../../icons/FrameFull.vue';\nimport FrameEmpty from '../../icons/FrameEmpty.vue';\nimport Rotation0 from '../../icons/Rotation0.vue';\nimport Rotation45 from '../../icons/Rotation45.vue';\nimport Rotation90 from '../../icons/Rotation90.vue';\nimport type { BubbleUIState } from '@milaboratories/pf-plots';\nimport { computed } from 'vue';\nimport { MAX_FACETS_COUNT } from '../../constantsCommon';\n\nconst store = useStore();\nconst settings = store.value.reactive.axesSettings;\nconst blockSettings = {\n  height: 40,\n  horizontalPadding: 12,\n  defaultState: 'open' as 'open' | 'close',\n  contentPadding: '0 24px',\n};\nconst OPTIONS_TITLE_ALIGN = [\n  { value: 'left', icon: AlignLeft },\n  { value: 'center', icon: AlignCenter },\n  { value: 'right', icon: AlignRight },\n];\nconst OPTIONS_HEATMAP_ROTATION = [\n  { value: 0, icon: Rotation0 },\n  { value: 45, icon: Rotation45 },\n  { value: 90, icon: Rotation90 },\n];\nconst OPTIONS_AXIS_LABEL_MODE = [\n  { value: 'auto', text: 'Auto' },\n  { value: 'custom', text: 'Custom' },\n  { value: 'hidden', text: 'Hidden' },\n];\nconst OPTIONS_CHART_FRAME = [\n  { value: 'none', icon: FrameEmpty },\n  { value: 'full', icon: FrameFull },\n];\nconst OPTIONS_SORTING = [\n  { text: 'ascending', value: 'asc' },\n  { text: 'descending', value: 'desc' },\n];\n\nconst options = computed(() => (store.value.reactive.optionsState.components as BubbleUIState['components']));\n\n</script>\n\n<template>\n  <div class=\"axes-form\" @click=\"(e) => e.stopPropagation()\">\n    <h3 class=\"axes-title\">\n      Axes\n    </h3>\n    <div class=\"axes-settings-list\">\n      <!--      Chart title -->\n      <CollapsableBlock title=\"Title\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.title.mode\"\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            :compact=\"true\"\n          />\n        </div>\n        <div v-if=\"settings.title.mode === 'custom'\" class=\"axes-settings-input\">\n          <PlTextField\n            v-model=\"settings.title.value\"\n            label=\"Chart title\"\n            placeholder=\"Chart title\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Alignment</span>\n          <BtnIconGroup v-model=\"settings.title.position\" :options=\"OPTIONS_TITLE_ALIGN\"/>\n        </div>\n      </CollapsableBlock>\n      <!--      X axis settings-->\n      <CollapsableBlock title=\"X-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.axisX.hideAxisLabels\">Hide axis labels</PlCheckbox>\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Labels rotation</span>\n          <BtnIconGroup v-model=\"settings.axisX.axisLabelsAngle\" :options=\"OPTIONS_HEATMAP_ROTATION\" />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.axisX.titleMode\"\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            :compact=\"true\"\n          />\n        </div>\n        <div v-if=\"settings.axisX.titleMode === 'custom'\">\n          <PlTextField\n            v-model=\"settings.axisX.customTitle\"\n            label=\"Text\"\n            placeholder=\"Type\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.axisX.sorting\"\n            label=\"Sorting\"\n            :options=\"OPTIONS_SORTING\"\n            :compact=\"true\"\n          />\n        </div>\n      </CollapsableBlock>\n      <!--      Y axis settings-->\n      <CollapsableBlock title=\"Y-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.axisY.hideAxisLabels\">Hide axis labels</PlCheckbox>\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Labels rotation</span>\n          <BtnIconGroup v-model=\"settings.axisY.axisLabelsAngle\" :options=\"OPTIONS_HEATMAP_ROTATION\" />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.axisY.titleMode\"\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            :compact=\"true\"\n          />\n        </div>\n        <div v-if=\"settings.axisY.titleMode === 'custom'\">\n          <PlTextField\n            v-model=\"settings.axisY.customTitle\"\n            label=\"Text\"\n            placeholder=\"Type\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.axisY.sorting\"\n            label=\"Sorting\"\n            :options=\"OPTIONS_SORTING\"\n            :compact=\"true\"\n          />\n        </div>\n      </CollapsableBlock>\n\n      <div class=\"other\">\n        <div class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.other.showLegend\">Show legend</PlCheckbox>\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlTextField v-model=\"settings.other.nullValueLabel\" label=\"Null value label\" placeholder=\"NA\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlNumberField\n            v-model=\"settings.other.maxFacetsCount\"\n            label=\"Max facets count\"\n            :min=\"1\"\n            :max=\"MAX_FACETS_COUNT\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Frame</span>\n          <BtnIconGroup v-model=\"settings.other.frame\" :options=\"OPTIONS_CHART_FRAME\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <Slider\n            v-model=\"settings.other.facetColumns\"\n            :style=\"{width: '100%'}\"\n            label=\"Facet column count\"\n            :min=\"1\"\n            :max=\"6\"\n            :step=\"1\"\n            :breakpoints=\"true\"\n            mode=\"input\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,5 +1,239 @@
-import f from "./BubbleAxesSettingsForm.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=BubbleAxesSettingsForm.vue2.js.map
+import { MAX_FACETS_COUNT as e } from "../../constantsCommon.js";
+import t from "../../components/CollapsableBlock.js";
+import n from "../../icons/Right.js";
+import r from "../../icons/Down.js";
+import i from "../../components/BtnIconGroup.js";
+import a from "../../icons/AlignLeft.js";
+import o from "../../icons/AlignCenter.js";
+import s from "../../icons/AlignRight.js";
+import c from "../../icons/FrameFull.js";
+import l from "../../icons/FrameEmpty.js";
+import ee from "../../icons/Rotation0.js";
+import u from "../../icons/Rotation45.js";
+import d from "../../icons/Rotation90.js";
+import { useStore as f } from "../../store.js";
+import { computed as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, openBlock as b, unref as x, withCtx as S } from "vue";
+import { PlBtnGroup as C, PlCheckbox as w, PlNumberField as T, PlTextField as E, Slider as D } from "@platforma-sdk/ui-vue";
+var O = { class: "axes-settings-list" }, k = { class: "axes-settings-options-row block" }, A = {
+	key: 0,
+	class: "axes-settings-input"
+}, j = { class: "axes-settings-options-row" }, M = { class: "axes-settings-options-row" }, N = { class: "axes-settings-options-row" }, P = { class: "axes-settings-options-row block" }, F = { key: 0 }, I = { class: "axes-settings-options-row block" }, L = { class: "axes-settings-options-row" }, R = { class: "axes-settings-options-row" }, te = { class: "axes-settings-options-row block" }, z = { key: 0 }, B = { class: "axes-settings-options-row block" }, V = { class: "other" }, H = { class: "axes-settings-options-row" }, U = { class: "axes-settings-options-row" }, W = { class: "axes-settings-options-row" }, G = { class: "axes-settings-options-row" }, K = { class: "axes-settings-options-row" }, q = /* @__PURE__ */ y({
+	__name: "BubbleAxesSettingsForm",
+	setup(y) {
+		let q = f(), J = q.value.reactive.axesSettings, Y = {
+			height: 40,
+			horizontalPadding: 12,
+			defaultState: "open",
+			contentPadding: "0 24px"
+		}, X = [
+			{
+				value: "left",
+				icon: a
+			},
+			{
+				value: "center",
+				icon: o
+			},
+			{
+				value: "right",
+				icon: s
+			}
+		], Z = [
+			{
+				value: 0,
+				icon: ee
+			},
+			{
+				value: 45,
+				icon: u
+			},
+			{
+				value: 90,
+				icon: d
+			}
+		], Q = [
+			{
+				value: "auto",
+				text: "Auto"
+			},
+			{
+				value: "custom",
+				text: "Custom"
+			},
+			{
+				value: "hidden",
+				text: "Hidden"
+			}
+		], ne = [{
+			value: "none",
+			icon: l
+		}, {
+			value: "full",
+			icon: c
+		}], $ = [{
+			text: "ascending",
+			value: "asc"
+		}, {
+			text: "descending",
+			value: "desc"
+		}];
+		return p(() => q.value.reactive.optionsState.components), (a, o) => (b(), h("div", {
+			class: "axes-form",
+			onClick: o[18] ||= (e) => e.stopPropagation()
+		}, [o[26] ||= g("h3", { class: "axes-title" }, " Axes ", -1), g("div", O, [
+			v(t, {
+				title: "Title",
+				settings: Y,
+				icon: n,
+				"icon-open": r
+			}, {
+				default: S(() => [
+					g("div", k, [v(x(C), {
+						modelValue: x(J).title.mode,
+						"onUpdate:modelValue": o[0] ||= (e) => x(J).title.mode = e,
+						label: "Title",
+						options: Q,
+						compact: !0
+					}, null, 8, ["modelValue"])]),
+					x(J).title.mode === "custom" ? (b(), h("div", A, [v(x(E), {
+						modelValue: x(J).title.value,
+						"onUpdate:modelValue": o[1] ||= (e) => x(J).title.value = e,
+						label: "Chart title",
+						placeholder: "Chart title"
+					}, null, 8, ["modelValue"])])) : m("", !0),
+					g("div", j, [o[19] ||= g("span", null, "Alignment", -1), v(i, {
+						modelValue: x(J).title.position,
+						"onUpdate:modelValue": o[2] ||= (e) => x(J).title.position = e,
+						options: X
+					}, null, 8, ["modelValue"])])
+				]),
+				_: 1
+			}),
+			v(t, {
+				title: "X-axis",
+				settings: Y,
+				icon: n,
+				"icon-open": r
+			}, {
+				default: S(() => [
+					g("div", M, [v(x(w), {
+						modelValue: x(J).axisX.hideAxisLabels,
+						"onUpdate:modelValue": o[3] ||= (e) => x(J).axisX.hideAxisLabels = e
+					}, {
+						default: S(() => [...o[20] ||= [_("Hide axis labels", -1)]]),
+						_: 1
+					}, 8, ["modelValue"])]),
+					g("div", N, [o[21] ||= g("span", null, "Labels rotation", -1), v(i, {
+						modelValue: x(J).axisX.axisLabelsAngle,
+						"onUpdate:modelValue": o[4] ||= (e) => x(J).axisX.axisLabelsAngle = e,
+						options: Z
+					}, null, 8, ["modelValue"])]),
+					g("div", P, [v(x(C), {
+						modelValue: x(J).axisX.titleMode,
+						"onUpdate:modelValue": o[5] ||= (e) => x(J).axisX.titleMode = e,
+						label: "Title",
+						options: Q,
+						compact: !0
+					}, null, 8, ["modelValue"])]),
+					x(J).axisX.titleMode === "custom" ? (b(), h("div", F, [v(x(E), {
+						modelValue: x(J).axisX.customTitle,
+						"onUpdate:modelValue": o[6] ||= (e) => x(J).axisX.customTitle = e,
+						label: "Text",
+						placeholder: "Type"
+					}, null, 8, ["modelValue"])])) : m("", !0),
+					g("div", I, [v(x(C), {
+						modelValue: x(J).axisX.sorting,
+						"onUpdate:modelValue": o[7] ||= (e) => x(J).axisX.sorting = e,
+						label: "Sorting",
+						options: $,
+						compact: !0
+					}, null, 8, ["modelValue"])])
+				]),
+				_: 1
+			}),
+			v(t, {
+				title: "Y-axis",
+				settings: Y,
+				icon: n,
+				"icon-open": r
+			}, {
+				default: S(() => [
+					g("div", L, [v(x(w), {
+						modelValue: x(J).axisY.hideAxisLabels,
+						"onUpdate:modelValue": o[8] ||= (e) => x(J).axisY.hideAxisLabels = e
+					}, {
+						default: S(() => [...o[22] ||= [_("Hide axis labels", -1)]]),
+						_: 1
+					}, 8, ["modelValue"])]),
+					g("div", R, [o[23] ||= g("span", null, "Labels rotation", -1), v(i, {
+						modelValue: x(J).axisY.axisLabelsAngle,
+						"onUpdate:modelValue": o[9] ||= (e) => x(J).axisY.axisLabelsAngle = e,
+						options: Z
+					}, null, 8, ["modelValue"])]),
+					g("div", te, [v(x(C), {
+						modelValue: x(J).axisY.titleMode,
+						"onUpdate:modelValue": o[10] ||= (e) => x(J).axisY.titleMode = e,
+						label: "Title",
+						options: Q,
+						compact: !0
+					}, null, 8, ["modelValue"])]),
+					x(J).axisY.titleMode === "custom" ? (b(), h("div", z, [v(x(E), {
+						modelValue: x(J).axisY.customTitle,
+						"onUpdate:modelValue": o[11] ||= (e) => x(J).axisY.customTitle = e,
+						label: "Text",
+						placeholder: "Type"
+					}, null, 8, ["modelValue"])])) : m("", !0),
+					g("div", B, [v(x(C), {
+						modelValue: x(J).axisY.sorting,
+						"onUpdate:modelValue": o[12] ||= (e) => x(J).axisY.sorting = e,
+						label: "Sorting",
+						options: $,
+						compact: !0
+					}, null, 8, ["modelValue"])])
+				]),
+				_: 1
+			}),
+			g("div", V, [
+				g("div", H, [v(x(w), {
+					modelValue: x(J).other.showLegend,
+					"onUpdate:modelValue": o[13] ||= (e) => x(J).other.showLegend = e
+				}, {
+					default: S(() => [...o[24] ||= [_("Show legend", -1)]]),
+					_: 1
+				}, 8, ["modelValue"])]),
+				g("div", U, [v(x(E), {
+					modelValue: x(J).other.nullValueLabel,
+					"onUpdate:modelValue": o[14] ||= (e) => x(J).other.nullValueLabel = e,
+					label: "Null value label",
+					placeholder: "NA"
+				}, null, 8, ["modelValue"])]),
+				g("div", W, [v(x(T), {
+					modelValue: x(J).other.maxFacetsCount,
+					"onUpdate:modelValue": o[15] ||= (e) => x(J).other.maxFacetsCount = e,
+					label: "Max facets count",
+					min: 1,
+					max: x(e)
+				}, null, 8, ["modelValue", "max"])]),
+				g("div", G, [o[25] ||= g("span", null, "Frame", -1), v(i, {
+					modelValue: x(J).other.frame,
+					"onUpdate:modelValue": o[16] ||= (e) => x(J).other.frame = e,
+					options: ne
+				}, null, 8, ["modelValue"])]),
+				g("div", K, [v(x(D), {
+					modelValue: x(J).other.facetColumns,
+					"onUpdate:modelValue": o[17] ||= (e) => x(J).other.facetColumns = e,
+					style: { width: "100%" },
+					label: "Facet column count",
+					min: 1,
+					max: 6,
+					step: 1,
+					breakpoints: !0,
+					mode: "input"
+				}, null, 8, ["modelValue"])])
+			])
+		])]));
+	}
+});
+export { q as default };
+
+//# sourceMappingURL=BubbleAxesSettingsForm.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BubbleAxesSettingsForm.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"BubbleAxesSettingsForm.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/forms/AxesSettingsForm/BubbleAxesSettingsForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Slider, PlCheckbox, PlNumberField } from '@platforma-sdk/ui-vue';\nimport { useStore } from '../../store';\nimport CollapsableBlock from '../../components/CollapsableBlock.vue';\nimport Right from '../../icons/Right.vue';\nimport Down from '../../icons/Down.vue';\nimport { PlTextField, PlBtnGroup } from '@platforma-sdk/ui-vue';\nimport BtnIconGroup from '../../components/BtnIconGroup.vue';\nimport AlignLeft from '../../icons/AlignLeft.vue';\nimport AlignCenter from '../../icons/AlignCenter.vue';\nimport AlignRight from '../../icons/AlignRight.vue';\nimport FrameFull from '../../icons/FrameFull.vue';\nimport FrameEmpty from '../../icons/FrameEmpty.vue';\nimport Rotation0 from '../../icons/Rotation0.vue';\nimport Rotation45 from '../../icons/Rotation45.vue';\nimport Rotation90 from '../../icons/Rotation90.vue';\nimport type { BubbleUIState } from '@milaboratories/pf-plots';\nimport { computed } from 'vue';\nimport { MAX_FACETS_COUNT } from '../../constantsCommon';\n\nconst store = useStore();\nconst settings = store.value.reactive.axesSettings;\nconst blockSettings = {\n  height: 40,\n  horizontalPadding: 12,\n  defaultState: 'open' as 'open' | 'close',\n  contentPadding: '0 24px',\n};\nconst OPTIONS_TITLE_ALIGN = [\n  { value: 'left', icon: AlignLeft },\n  { value: 'center', icon: AlignCenter },\n  { value: 'right', icon: AlignRight },\n];\nconst OPTIONS_HEATMAP_ROTATION = [\n  { value: 0, icon: Rotation0 },\n  { value: 45, icon: Rotation45 },\n  { value: 90, icon: Rotation90 },\n];\nconst OPTIONS_AXIS_LABEL_MODE = [\n  { value: 'auto', text: 'Auto' },\n  { value: 'custom', text: 'Custom' },\n  { value: 'hidden', text: 'Hidden' },\n];\nconst OPTIONS_CHART_FRAME = [\n  { value: 'none', icon: FrameEmpty },\n  { value: 'full', icon: FrameFull },\n];\nconst OPTIONS_SORTING = [\n  { text: 'ascending', value: 'asc' },\n  { text: 'descending', value: 'desc' },\n];\n\nconst options = computed(() => (store.value.reactive.optionsState.components as BubbleUIState['components']));\n\n</script>\n\n<template>\n  <div class=\"axes-form\" @click=\"(e) => e.stopPropagation()\">\n    <h3 class=\"axes-title\">\n      Axes\n    </h3>\n    <div class=\"axes-settings-list\">\n      <!--      Chart title -->\n      <CollapsableBlock title=\"Title\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.title.mode\"\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            :compact=\"true\"\n          />\n        </div>\n        <div v-if=\"settings.title.mode === 'custom'\" class=\"axes-settings-input\">\n          <PlTextField\n            v-model=\"settings.title.value\"\n            label=\"Chart title\"\n            placeholder=\"Chart title\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Alignment</span>\n          <BtnIconGroup v-model=\"settings.title.position\" :options=\"OPTIONS_TITLE_ALIGN\"/>\n        </div>\n      </CollapsableBlock>\n      <!--      X axis settings-->\n      <CollapsableBlock title=\"X-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.axisX.hideAxisLabels\">Hide axis labels</PlCheckbox>\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Labels rotation</span>\n          <BtnIconGroup v-model=\"settings.axisX.axisLabelsAngle\" :options=\"OPTIONS_HEATMAP_ROTATION\" />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.axisX.titleMode\"\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            :compact=\"true\"\n          />\n        </div>\n        <div v-if=\"settings.axisX.titleMode === 'custom'\">\n          <PlTextField\n            v-model=\"settings.axisX.customTitle\"\n            label=\"Text\"\n            placeholder=\"Type\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.axisX.sorting\"\n            label=\"Sorting\"\n            :options=\"OPTIONS_SORTING\"\n            :compact=\"true\"\n          />\n        </div>\n      </CollapsableBlock>\n      <!--      Y axis settings-->\n      <CollapsableBlock title=\"Y-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.axisY.hideAxisLabels\">Hide axis labels</PlCheckbox>\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Labels rotation</span>\n          <BtnIconGroup v-model=\"settings.axisY.axisLabelsAngle\" :options=\"OPTIONS_HEATMAP_ROTATION\" />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.axisY.titleMode\"\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            :compact=\"true\"\n          />\n        </div>\n        <div v-if=\"settings.axisY.titleMode === 'custom'\">\n          <PlTextField\n            v-model=\"settings.axisY.customTitle\"\n            label=\"Text\"\n            placeholder=\"Type\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.axisY.sorting\"\n            label=\"Sorting\"\n            :options=\"OPTIONS_SORTING\"\n            :compact=\"true\"\n          />\n        </div>\n      </CollapsableBlock>\n\n      <div class=\"other\">\n        <div class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.other.showLegend\">Show legend</PlCheckbox>\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlTextField v-model=\"settings.other.nullValueLabel\" label=\"Null value label\" placeholder=\"NA\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlNumberField\n            v-model=\"settings.other.maxFacetsCount\"\n            label=\"Max facets count\"\n            :min=\"1\"\n            :max=\"MAX_FACETS_COUNT\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Frame</span>\n          <BtnIconGroup v-model=\"settings.other.frame\" :options=\"OPTIONS_CHART_FRAME\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <Slider\n            v-model=\"settings.other.facetColumns\"\n            :style=\"{width: '100%'}\"\n            label=\"Facet column count\"\n            :min=\"1\"\n            :max=\"6\"\n            :step=\"1\"\n            :breakpoints=\"true\"\n            mode=\"input\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAoBA,IAAM,IAAQ,GAAU,EAClB,IAAW,EAAM,MAAM,SAAS,cAChC,IAAgB;GACpB,QAAQ;GACR,mBAAmB;GACnB,cAAc;GACd,gBAAgB;GACjB,EACK,IAAsB;GAC1B;IAAE,OAAO;IAAQ,MAAM;IAAW;GAClC;IAAE,OAAO;IAAU,MAAM;IAAa;GACtC;IAAE,OAAO;IAAS,MAAM;IAAY;GACrC,EACK,IAA2B;GAC/B;IAAE,OAAO;IAAG,MAAM;IAAW;GAC7B;IAAE,OAAO;IAAI,MAAM;IAAY;GAC/B;IAAE,OAAO;IAAI,MAAM;IAAY;GAChC,EACK,IAA0B;GAC9B;IAAE,OAAO;IAAQ,MAAM;IAAQ;GAC/B;IAAE,OAAO;IAAU,MAAM;IAAU;GACnC;IAAE,OAAO;IAAU,MAAM;IAAU;GACpC,EACK,KAAsB,CAC1B;GAAE,OAAO;GAAQ,MAAM;GAAY,EACnC;GAAE,OAAO;GAAQ,MAAM;GAAW,CACnC,EACK,IAAkB,CACtB;GAAE,MAAM;GAAa,OAAO;GAAO,EACnC;GAAE,MAAM;GAAc,OAAO;GAAQ,CACtC;SAEe,QAAgB,EAAM,MAAM,SAAS,aAAa,WAA2C,kBAK3G,EA+HM,OAAA;GA/HD,OAAM;GAAa,SAAK,AAAA,EAAA,SAAG,MAAM,EAAE,iBAAe;gBACrD,EAEK,MAAA,EAFD,OAAM,cAAY,EAAC,UAEvB,GAAA,EACA,EA0HM,OA1HN,GA0HM;GAxHJ,EAoBmB,GAAA;IApBD,OAAM;IAAS,UAAU;IAAgB,MAAM;IAAQ,aAAW;;qBAQ5E;KAPN,EAOM,OAPN,GAOM,CANJ,EAKE,EAAA,EAAA,EAAA;kBAJS,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,OAAI;MAC5B,OAAM;MACL,SAAS;MACT,SAAS;;KAGH,EAAA,EAAQ,CAAC,MAAM,SAAI,YAAA,GAAA,EAA9B,EAMM,OANN,GAMM,CALJ,EAIE,EAAA,EAAA,EAAA;kBAHS,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,QAAK;MAC7B,OAAM;MACN,aAAY;;KAGhB,EAGM,OAHN,GAGM,CAAA,AAAA,EAAA,QAFJ,EAAsB,QAAA,MAAhB,aAAS,GAAA,EACf,EAAgF,GAAA;kBAAzD,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,WAAQ;MAAG,SAAS;;;;;GAI9D,EA+BmB,GAAA;IA/BD,OAAM;IAAU,UAAU;IAAgB,MAAM;IAAQ,aAAW;;qBAG7E;KAFN,EAEM,OAFN,GAEM,CADJ,EAAiF,EAAA,EAAA,EAAA;kBAA5D,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,iBAAc;;uBAAkB,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAhB,oBAAgB,GAAA,CAAA,CAAA,CAAA;;;KAEtE,EAGM,OAHN,GAGM,CAAA,AAAA,EAAA,QAFJ,EAA4B,QAAA,MAAtB,mBAAe,GAAA,EACrB,EAA6F,GAAA;kBAAtE,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,kBAAe;MAAG,SAAS;;KAEnE,EAOM,OAPN,GAOM,CANJ,EAKE,EAAA,EAAA,EAAA;kBAJS,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,YAAS;MACjC,OAAM;MACL,SAAS;MACT,SAAS;;KAGH,EAAA,EAAQ,CAAC,MAAM,cAAS,YAAA,GAAA,EAAnC,EAMM,OAAA,GAAA,CALJ,EAIE,EAAA,EAAA,EAAA;kBAHS,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,cAAW;MACnC,OAAM;MACN,aAAY;;KAGhB,EAOM,OAPN,GAOM,CANJ,EAKE,EAAA,EAAA,EAAA;kBAJS,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,UAAO;MAC/B,OAAM;MACL,SAAS;MACT,SAAS;;;;;GAKhB,EA+BmB,GAAA;IA/BD,OAAM;IAAU,UAAU;IAAgB,MAAM;IAAQ,aAAW;;qBAG7E;KAFN,EAEM,OAFN,GAEM,CADJ,EAAiF,EAAA,EAAA,EAAA;kBAA5D,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,iBAAc;;uBAAkB,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAhB,oBAAgB,GAAA,CAAA,CAAA,CAAA;;;KAEtE,EAGM,OAHN,GAGM,CAAA,AAAA,EAAA,QAFJ,EAA4B,QAAA,MAAtB,mBAAe,GAAA,EACrB,EAA6F,GAAA;kBAAtE,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,kBAAe;MAAG,SAAS;;KAEnE,EAOM,OAPN,IAOM,CANJ,EAKE,EAAA,EAAA,EAAA;kBAJS,EAAA,EAAQ,CAAC,MAAM;gDAAf,EAAQ,CAAC,MAAM,YAAS;MACjC,OAAM;MACL,SAAS;MACT,SAAS;;KAGH,EAAA,EAAQ,CAAC,MAAM,cAAS,YAAA,GAAA,EAAnC,EAMM,OAAA,GAAA,CALJ,EAIE,EAAA,EAAA,EAAA;kBAHS,EAAA,EAAQ,CAAC,MAAM;gDAAf,EAAQ,CAAC,MAAM,cAAW;MACnC,OAAM;MACN,aAAY;;KAGhB,EAOM,OAPN,GAOM,CANJ,EAKE,EAAA,EAAA,EAAA;kBAJS,EAAA,EAAQ,CAAC,MAAM;gDAAf,EAAQ,CAAC,MAAM,UAAO;MAC/B,OAAM;MACL,SAAS;MACT,SAAS;;;;;GAKhB,EA+BM,OA/BN,GA+BM;IA9BJ,EAEM,OAFN,GAEM,CADJ,EAAwE,EAAA,EAAA,EAAA;iBAAnD,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,aAAU;;sBAAa,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAX,eAAW,GAAA,CAAA,CAAA,CAAA;;;IAE7D,EAEM,OAFN,GAEM,CADJ,EAAiG,EAAA,EAAA,EAAA;iBAA3E,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,iBAAc;KAAE,OAAM;KAAmB,aAAY;;IAE5F,EAOM,OAPN,GAOM,CANJ,EAKE,EAAA,EAAA,EAAA;iBAJS,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,iBAAc;KACtC,OAAM;KACL,KAAK;KACL,KAAK,EAAA,EAAgB;;IAG1B,EAGM,OAHN,GAGM,CAAA,AAAA,EAAA,QAFJ,EAAkB,QAAA,MAAZ,SAAK,GAAA,EACX,EAA8E,GAAA;iBAAvD,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,QAAK;KAAG,SAAS;;IAEzD,EAWM,OAXN,GAWM,CAVJ,EASE,EAAA,EAAA,EAAA;iBARS,EAAA,EAAQ,CAAC,MAAM;+CAAf,EAAQ,CAAC,MAAM,eAAY;KACnC,OAAO,EAAA,OAAA,QAAe;KACvB,OAAM;KACL,KAAK;KACL,KAAK;KACL,MAAM;KACN,aAAa;KACd,MAAK"}

package/dist/forms/AxesSettingsForm/DiscreteAxesSettingsForm.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DiscreteAxesSettingsForm.js","names":[],"sources":["../../../src/forms/AxesSettingsForm/DiscreteAxesSettingsForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Slider, PlToggleSwitch, PlCheckbox, PlNumberField } from '@platforma-sdk/ui-vue';\nimport { useStore } from '../../store';\nimport CollapsableBlock from '../../components/CollapsableBlock.vue';\nimport Right from '../../icons/Right.vue';\nimport Down from '../../icons/Down.vue';\nimport { PlTextField, PlBtnGroup } from '@platforma-sdk/ui-vue';\nimport BtnIconGroup from '../../components/BtnIconGroup.vue';\nimport AlignLeft from '../../icons/AlignLeft.vue';\nimport AlignCenter from '../../icons/AlignCenter.vue';\nimport AlignRight from '../../icons/AlignRight.vue';\nimport FrameFull from '../../icons/FrameFull.vue';\nimport FrameEmpty from '../../icons/FrameEmpty.vue';\nimport Rotation0 from '../../icons/Rotation0.vue';\nimport Rotation45 from '../../icons/Rotation45.vue';\nimport Rotation90 from '../../icons/Rotation90.vue';\nimport FrameLeft from '../../icons/FrameLeft.vue';\nimport FrameBottom from '../../icons/FrameBottom.vue';\nimport FrameLeftBottom from '../../icons/FrameLeftBottom.vue';\nimport AesButton from '../../components/AesButton.vue';\nimport FormWrapper from '../../components/AesSettings/FormWrapper.vue';\nimport { computed, onMounted, ref } from 'vue';\nimport AesDataMapping from '../../components/AesSettings/AesDataMappingDiscrete.vue';\nimport type { AestheticMappingCategorical } from '../../dataBindAes';\nimport { createDefaultMapping } from '../../dataBindAes';\nimport type { LabelsRotation } from '../../types';\nimport { getDiscreteLabelsRotation } from '../../utils';\nimport { watch } from 'vue';\nimport { MAX_FACETS_COUNT, MAX_GROUPS_COUNT } from '../../constantsCommon';\n\nconst store = useStore();\nconst settings = store.value.reactive.axesSettings;\nconst blockSettings = {\n  height: 40,\n  horizontalPadding: 12,\n  defaultState: 'open' as 'open' | 'close',\n  contentPadding: '0 24px',\n};\n\nconst OPTIONS_TITLE_ALIGN = [\n  { value: 'left', icon: AlignLeft },\n  { value: 'center', icon: AlignCenter },\n  { value: 'right', icon: AlignRight },\n];\n// const OPTIONS_FACET_FRAME = [\n//   {value: 'empty', icon: FrameEmpty},\n//   {value: 'full', icon: FrameFull},\n// ]\nconst OPTIONS_LABELS_ROTATION = [\n  { value: 'center', icon: Rotation0 },\n  { value: '45deg', icon: Rotation45 },\n  { value: '90deg', icon: Rotation90 },\n];\nconst OPTIONS_AXIS_LABEL_MODE = [\n  { value: 'auto', text: 'Auto' },\n  { value: 'custom', text: 'Custom' },\n  { value: 'hidden', text: 'Hidden' },\n];\nconst OPTIONS_SCALE = [\n  { value: 'linear', text: 'Linear' },\n  { value: 'log', text: 'Log' },\n];\nconst OPTIONS_CHART_FRAME = [\n  { value: 'empty', icon: FrameEmpty },\n  { value: 'left', icon: FrameLeft },\n  { value: 'bottom', icon: FrameBottom },\n  { value: 'left-bottom', icon: FrameLeftBottom },\n  { value: 'full', icon: FrameFull },\n];\n\nconst inputGuide = computed(() => store.value.inputGuide.value);\nconst labelsInfo = computed(() => store.value.uniqueValuesData.value);\n\nconst reorderPrimaryOpen = ref(false);\nconst reorderSecondaryOpen = ref(false);\n\nconst defaultReorderPrimaryOpen = computed(() => store.value.reactive.tabDefaultState['axes'].reorderPrimaryOpen);\nconst defaultReorderSecondaryOpen = computed(() => store.value.reactive.tabDefaultState['axes'].reorderSecondaryOpen);\nonMounted(() => {\n  if (defaultReorderPrimaryOpen.value) {\n    reorderPrimaryOpen.value = true;\n  }\n  if (defaultReorderSecondaryOpen.value) {\n    reorderSecondaryOpen.value = true;\n  }\n});\nwatch(() => defaultReorderPrimaryOpen.value, (v) => {\n  if (v) {\n    reorderSecondaryOpen.value = false;\n    reorderPrimaryOpen.value = true;\n  }\n});\nwatch(() => defaultReorderSecondaryOpen.value, (v) => {\n  if (v) {\n    reorderPrimaryOpen.value = false;\n    reorderSecondaryOpen.value = true;\n  }\n});\n\nconst primaryGrouping = computed(() => store.value.reactive.optionsState.components.primaryGrouping?.selectorStates[0]?.selectedSource);\nconst secondaryGrouping = computed(() => store.value.reactive.optionsState.components.secondaryGrouping?.selectorStates[0]?.selectedSource);\n\nconst primaryGroups = computed(() => store.value.commonHelpersData.primaryGroups.value);\nconst secondaryGroups = computed(() => store.value.commonHelpersData.secondaryGroups.value);\n\nconst usedAesInMapping = computed(() => store.value.commonHelpersData.usedAesInMapping.value);\n\nconst mappingPrimary = ref(store.value.reactive.dataBindAes[primaryGrouping.value] as AestheticMappingCategorical ?? createDefaultMapping(primaryGroups.value, store.value.defaultPalette.categorical));\nconst mappingSecondary = ref(store.value.reactive.dataBindAes[secondaryGrouping.value] as AestheticMappingCategorical ?? createDefaultMapping(secondaryGroups.value, store.value.defaultPalette.categorical));\n\nconst primaryInfo = computed(() => {\n  if (primaryGrouping.value) {\n    const selectedSourceInfo = inputGuide.value.getSourceInfo(primaryGrouping.value) ?? null;\n    const entry = labelsInfo.value[primaryGrouping.value];\n    const valueLabels = entry?.overflow ? null : (entry?.labels ?? null);\n    return {\n      selectedSourceInfo,\n      labels: primaryGroups.value.reduce((res: Record<string, string>, v) => {\n        res[v] = valueLabels?.[v] ?? String(v);\n        if (res[v] === 'null') {\n          res[v] = store.value.reactive.axesSettings.other.nullValueLabel;\n        }\n        return res;\n      }, {}),\n    };\n  }\n  return null;\n});\nconst secondaryInfo = computed(() => {\n  if (secondaryGrouping.value) {\n    const selectedSourceInfo = inputGuide.value.getSourceInfo(secondaryGrouping.value) ?? null;\n    const entry = labelsInfo.value[secondaryGrouping.value];\n    const valueLabels = entry?.overflow ? null : (entry?.labels ?? null);\n    return {\n      selectedSourceInfo,\n      labels: secondaryGroups.value.reduce((res: Record<string, string>, v) => {\n        res[v] = valueLabels?.[v] ?? String(v);\n        if (res[v] === 'null') {\n          res[v] = store.value.reactive.axesSettings.other.nullValueLabel;\n        }\n        return res;\n      }, {}),\n    };\n  }\n  return null;\n});\n\nfunction updateOrder(value: AestheticMappingCategorical, sourceId: string) {\n  store.value.reactive.dataBindAes[sourceId] = value;\n}\n\nconst OPTIONS_FACET_SHARED = [\n  { text: 'X', value: 'x' },\n  { text: 'Y', value: 'y' },\n  { text: 'XY', value: 'xy' },\n  { text: 'None', value: 'none' },\n];\n\nconst primaryOptions = computed(() => {\n  const entry = labelsInfo.value[primaryGrouping.value];\n  return entry?.overflow ? null : entry;\n});\nconst xLabelsRotation = computed({\n  get() {\n    return getDiscreteLabelsRotation(settings.axisX.labelsRotation, primaryOptions.value?.options);\n  },\n  set(value: LabelsRotation) {\n    settings.axisX.labelsRotation = value;\n  },\n});\n</script>\n\n<template>\n  <div class=\"axes-form\" @click=\"(e) => e.stopPropagation()\">\n    <h3 class=\"axes-title\">\n      Axes\n    </h3>\n    <div class=\"axes-settings-list\">\n      <!--      Chart title -->\n      <CollapsableBlock title=\"Title\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.title.mode\"\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            :compact=\"true\"\n          />\n        </div>\n        <div v-if=\"settings.title.mode === 'custom'\" class=\"axes-settings-input\">\n          <PlTextField\n            v-model=\"settings.title.value\"\n            label=\"Chart title\"\n            placeholder=\"Chart title\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Alignment</span>\n          <BtnIconGroup v-model=\"settings.title.position\" :options=\"OPTIONS_TITLE_ALIGN\"/>\n        </div>\n        <!--          <div class=\"axes-settings-options-row\">-->\n        <!--            <span>Facet frame style</span>-->\n        <!--            <btn-icon-group :options=\"OPTIONS_FACET_FRAME\" v-model=\"settings.title.facetTitleFrame\"/>-->\n        <!--          </div>-->\n      </CollapsableBlock>\n      <!--      X axis settings-->\n      <CollapsableBlock title=\"X-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div v-if=\"primaryGroups.length > 1\" class=\"axes-settings-options-row\">\n          <span>Primary groups order: </span>\n          <AesButton :data=\"{type: 'data', value: null}\" @click=\"reorderPrimaryOpen = true\" />\n          <template v-if=\"reorderPrimaryOpen && primaryInfo\">\n            <FormWrapper\n              title=\"Reorder primary groups\"\n              back-title=\"Axes Settings\"\n              @form:open=\"store.reactive.tabDefaultState['axes'].reorderPrimaryOpen = false\"\n              @form:close=\"reorderPrimaryOpen = false\"\n            >\n              <AesDataMapping\n                v-model=\"mappingPrimary\"\n                :column-value-labels=\"primaryInfo.labels\"\n                :data-column-label=\"primaryInfo.selectedSourceInfo?.label ?? ''\"\n                :used-aes-in-mapping=\"usedAesInMapping[primaryGrouping]\"\n                allow-reordering\n                allow-hiding\n                :allow-null-option=\"settings.axisX.allowNullPrimaryGroups\"\n                @update:modelValue=\"(value:AestheticMappingCategorical) => updateOrder(value, primaryGrouping)\"\n              />\n            </FormWrapper>\n          </template>\n        </div>\n        <div v-if=\"primaryGroups.length > 1\" class=\"axes-settings-options-row\">\n          <span>Allow null primary group</span>\n          <PlToggleSwitch v-model=\"settings.axisX.allowNullPrimaryGroups\" />\n        </div>\n        <div v-if=\"secondaryGroups.length > 1\" class=\"axes-settings-options-row\">\n          <span>Secondary groups order: </span>\n          <AesButton :data=\"{type: 'data', value: null}\" @click=\"reorderSecondaryOpen = true\" />\n          <template v-if=\"reorderSecondaryOpen && secondaryInfo\">\n            <FormWrapper\n              title=\"Reorder secondary groups\"\n              back-title=\"Axes Settings\"\n              @form:open=\"store.reactive.tabDefaultState['axes'].reorderSecondaryOpen = false\"\n              @form:close=\"reorderSecondaryOpen = false\"\n            >\n              <AesDataMapping\n                v-model=\"mappingSecondary\"\n                :column-value-labels=\"secondaryInfo.labels\"\n                :data-column-label=\"secondaryInfo.selectedSourceInfo?.label ?? ''\"\n                :used-aes-in-mapping=\"usedAesInMapping[secondaryGrouping]\"\n                allow-reordering\n                allow-hiding\n                :allow-null-option=\"settings.axisX.allowNullSecondaryGroups\"\n                @update:modelValue=\"(value:AestheticMappingCategorical) => updateOrder(value, secondaryGrouping)\"\n              />\n            </FormWrapper>\n          </template>\n        </div>\n        <div v-if=\"secondaryGroups.length > 1\" class=\"axes-settings-options-row\">\n          <span>Allow null secondary group</span>\n          <PlToggleSwitch v-model=\"settings.axisX.allowNullSecondaryGroups\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.axisX.hideAxisLabels\">Hide axis labels</PlCheckbox>\n        </div>\n        <div v-if=\"!settings.axisX.hideAxisLabels\" class=\"axes-settings-options-row\">\n          <span>Labels rotation</span>\n          <BtnIconGroup v-model=\"xLabelsRotation\" :options=\"OPTIONS_LABELS_ROTATION\" />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.axisX.titleMode\"\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            :compact=\"true\"\n          />\n        </div>\n        <div v-if=\"settings.axisX.titleMode === 'custom'\">\n          <PlTextField\n            v-model=\"settings.axisX.customTitle\"\n            label=\"Text\"\n            placeholder=\"Type\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Gridlines</span>\n          <PlToggleSwitch v-model=\"settings.axisX.gridlines\" />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Lines between categories</span>\n          <PlToggleSwitch v-model=\"settings.axisX.linesBetweenCategories\" />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Ticks</span>\n          <PlToggleSwitch v-model=\"settings.axisX.ticks\" />\n        </div>\n      </CollapsableBlock>\n      <!--      Y axis settings-->\n      <CollapsableBlock title=\"Y-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.axisY.titleMode\"\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            :compact=\"true\"\n          />\n        </div>\n        <div v-if=\"settings.axisY.titleMode === 'custom'\">\n          <PlTextField\n            v-model=\"settings.axisY.customTitle\"\n            label=\"Text\"\n            placeholder=\"Type\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.axisY.hideAxisLabels\">Hide axis labels</PlCheckbox>\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.axisY.scale\"\n            label=\"Scale\"\n            :options=\"OPTIONS_SCALE\"\n            :compact=\"true\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Gridlines</span>\n          <PlToggleSwitch v-model=\"settings.axisY.gridlines\" />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Ticks</span>\n          <PlToggleSwitch v-model=\"settings.axisY.ticks\" />\n        </div>\n      </CollapsableBlock>\n      <!--      Facet settings-->\n      <div class=\"other\">\n        <div class=\"axes-settings-options-row\">\n          <PlCheckbox v-model=\"settings.other.showLegend\">Show legend</PlCheckbox>\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlTextField v-model=\"settings.other.nullValueLabel\" label=\"Null value label\" placeholder=\"NA\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlNumberField\n            v-model=\"settings.other.maxGroupCount\"\n            label=\"Max groups count\"\n            :min=\"2\"\n            :max=\"MAX_GROUPS_COUNT\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <PlNumberField\n            v-model=\"settings.other.maxFacetsCount\"\n            label=\"Max facets count\"\n            :min=\"1\"\n            :max=\"MAX_FACETS_COUNT\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Frame</span>\n          <BtnIconGroup v-model=\"settings.other.frame\" :options=\"OPTIONS_CHART_FRAME\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Reverse axes</span>\n          <PlToggleSwitch v-model=\"settings.other.reverse\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <Slider\n            v-model=\"settings.other.facetColumns\"\n            :style=\"{width: '100%'}\"\n            label=\"Facet column count\"\n            :min=\"1\"\n            :max=\"6\"\n            :step=\"1\"\n            :breakpoints=\"true\"\n            mode=\"input\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <PlBtnGroup\n            v-model=\"settings.other.facetSharedBy\"\n            label=\"Facet shared by\"\n            :options=\"OPTIONS_FACET_SHARED\"\n            :compact=\"true\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}