@milaboratories/graph-maker 1.1.149 → 1.1.150

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue.d.ts +1 -0
  2. package/dist/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue.d.ts.map +1 -1
  3. package/dist/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue.js +97 -95
  4. package/dist/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue.js.map +1 -1
  5. package/dist/GraphMaker/forms/AxesSettingsForm/DiscreteAxesSettingsForm.vue.d.ts.map +1 -1
  6. package/dist/GraphMaker/forms/AxesSettingsForm/DiscreteAxesSettingsForm.vue.js +111 -109
  7. package/dist/GraphMaker/forms/AxesSettingsForm/DiscreteAxesSettingsForm.vue.js.map +1 -1
  8. package/dist/GraphMaker/forms/LayersForm/AesSelector.vue.d.ts.map +1 -1
  9. package/dist/GraphMaker/forms/LayersForm/AesSelector.vue.js +84 -83
  10. package/dist/GraphMaker/forms/LayersForm/AesSelector.vue.js.map +1 -1
  11. package/dist/GraphMaker/index.vue.js +33 -33
  12. package/dist/GraphMaker/index.vue.js.map +1 -1
  13. package/dist/GraphMaker/utils/createChartSettingsForRender/composeDiscreteSettings.d.ts.map +1 -1
  14. package/dist/GraphMaker/utils/createChartSettingsForRender/composeDiscreteSettings.js +25 -33
  15. package/dist/GraphMaker/utils/createChartSettingsForRender/composeDiscreteSettings.js.map +1 -1
  16. package/dist/GraphMaker/utils/loadUniqueValuesToSave.d.ts.map +1 -1
  17. package/dist/GraphMaker/utils/loadUniqueValuesToSave.js +23 -23
  18. package/dist/GraphMaker/utils/loadUniqueValuesToSave.js.map +1 -1
  19. package/dist/node_modules/@milaboratories/miplots4/dist/scatterplot/utils/createLegendInfo.js +18 -18
  20. package/dist/node_modules/@milaboratories/miplots4/dist/scatterplot/utils/createLegendInfo.js.map +1 -1
  21. package/package.json +2 -2
package/dist/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue.d.ts CHANGED
@@ -7,6 +7,7 @@ type __VLS_Props = {
7
7
  modelValue: AestheticMappingCategorical;
8
8
  allowReordering?: boolean;
9
9
  allowHiding?: boolean;
10
+ allowNullOption?: boolean;
10
11
  };
11
12
  declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
12
13
  "update:modelValue": (...args: any[]) => void;
package/dist/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AesDataMappingDiscrete.vue.d.ts","sourceRoot":"","sources":["../../../../src/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue"],"names":[],"mappings":"AAyYA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EACL,2BAA2B,EAE5B,MAAM,mBAAmB,CAAC;AAY3B,KAAK,WAAW,GAAG;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC3C,UAAU,EAAE,2BAA2B,CAAC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;;;;;;;;AA2lBF,wBASG"}
1
+ {"version":3,"file":"AesDataMappingDiscrete.vue.d.ts","sourceRoot":"","sources":["../../../../src/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue"],"names":[],"mappings":"AA2YA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EACL,2BAA2B,EAE5B,MAAM,mBAAmB,CAAC;AAY3B,KAAK,WAAW,GAAG;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC3C,UAAU,EAAE,2BAA2B,CAAC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;;;;;;;;AA4lBF,wBASG"}
package/dist/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue.js CHANGED
@@ -30,116 +30,118 @@ const Ce = { class: "aes-mapping-block" }, ke = { style: { margin: "0 24px" } },
30
30
  usedAesInMapping: {},
31
31
  modelValue: {},
32
32
  allowReordering: { type: Boolean },
33
- allowHiding: { type: Boolean }
33
+ allowHiding: { type: Boolean },
34
+ allowNullOption: { type: Boolean }
34
35
  },
35
36
  emits: ["update:modelValue"],
36
- setup(U, { emit: D }) {
37
- const t = U, g = D, h = f(!1), d = f(t.modelValue.palette), P = p(() => ue(d.value)), s = f(null), N = p(() => s.value === null ? null : t.modelValue.order.indexOf(s.value)), n = f(null), O = p(
38
- () => t.modelValue.order.map((e) => {
39
- var l;
40
- const o = (l = t.modelValue.mapping[e]) == null ? void 0 : l.aes;
37
+ setup(N, { emit: O }) {
38
+ const t = N, g = O, h = f(!1), d = f(t.modelValue.palette), L = p(() => ue(d.value)), s = f(null), U = p(() => s.value === null ? null : t.modelValue.order.indexOf(s.value)), n = f(null), B = p(() => {
39
+ const l = t.modelValue.order.map((a) => {
40
+ var o;
41
+ const e = (o = t.modelValue.mapping[a]) == null ? void 0 : o.aes;
41
42
  return {
42
- text: t.columnValueLabels[e],
43
- value: e,
44
- dotShape: o == null ? void 0 : o.dotShape,
45
- color: o == null ? void 0 : o.color,
46
- lineType: o == null ? void 0 : o.lineShape
43
+ text: t.columnValueLabels[a],
44
+ value: a,
45
+ dotShape: e == null ? void 0 : e.dotShape,
46
+ color: e == null ? void 0 : e.color,
47
+ lineType: e == null ? void 0 : e.lineShape
47
48
  };
48
- })
49
- );
50
- function B(e) {
51
- d.value = e, h.value = !1, g(
49
+ });
50
+ return t.allowNullOption ? l : l.filter((a) => a.value !== "null");
51
+ });
52
+ function D(l) {
53
+ d.value = l, h.value = !1, g(
52
54
  "update:modelValue",
53
- ie(e, t.modelValue.order)
55
+ ie(l, t.modelValue.order)
54
56
  );
55
57
  }
56
- function $(e, o, l) {
58
+ function $(l, a, e) {
57
59
  g("update:modelValue", {
58
60
  ...t.modelValue,
59
61
  mapping: {
60
62
  ...t.modelValue.mapping,
61
- [e]: {
62
- ...t.modelValue.mapping[e],
63
+ [l]: {
64
+ ...t.modelValue.mapping[l],
63
65
  aes: {
64
- ...t.modelValue.mapping[e].aes,
65
- [o]: l
66
+ ...t.modelValue.mapping[l].aes,
67
+ [a]: e
66
68
  }
67
69
  }
68
70
  }
69
71
  });
70
72
  }
71
- const T = J({
73
+ const P = J({
72
74
  color: {},
73
75
  dotShape: {},
74
76
  lineType: {}
75
77
  });
76
- function I(e, o, l) {
77
- l && !T[e][o.value] && (T[e][o.value] = l);
78
+ function T(l, a, e) {
79
+ e && (P[l][a.value] = e);
78
80
  }
79
- function A(e, o) {
80
- const l = s.value === e.value && n.value === o;
81
- s.value = l ? null : e.value, n.value = l ? null : o;
81
+ function I(l, a) {
82
+ const e = s.value === l.value && n.value === a;
83
+ s.value = e ? null : l.value, n.value = e ? null : a;
82
84
  }
83
85
  function R() {
84
86
  s.value = null, n.value = null;
85
87
  }
86
88
  const F = p(
87
- () => V[d.value].colors.map((e) => ({ color: e, name: e }))
89
+ () => V[d.value].colors.map((l) => ({ color: l, name: l }))
88
90
  ), H = p(() => n.value ? de(
89
91
  n.value === "lineType" ? re.length : n.value === "dotShape" ? se.length : F.value.length,
90
92
  n.value
91
93
  ) : 0), E = f();
92
94
  t.allowReordering && ae(E, {
93
95
  handle: ".column-value__reorder-icon",
94
- onChange(e) {
96
+ onChange(l) {
95
97
  g("update:modelValue", {
96
98
  ...t.modelValue,
97
- order: e.map((o) => t.modelValue.order[o])
99
+ order: l.map((a) => t.modelValue.order[a])
98
100
  });
99
101
  }
100
102
  });
101
- function z(e) {
102
- var o;
103
- console.log("switch for", e.value), g("update:modelValue", {
103
+ function z(l) {
104
+ var a;
105
+ g("update:modelValue", {
104
106
  ...t.modelValue,
105
107
  hidden: {
106
108
  ...t.modelValue.hidden,
107
- [e.value]: !((o = t.modelValue.hidden) != null && o[e.value])
109
+ [l.value]: !((a = t.modelValue.hidden) != null && a[l.value])
108
110
  }
109
111
  });
110
112
  }
111
- function b(e, o, l = 0, a = 1) {
112
- const _ = 1 / (e.length - 1), j = ye().domain(e.map((y, q) => l + q * _ * (a - l))).range(e);
113
- return (y) => y > a || y < l ? o : j(y);
113
+ function b(l, a, e = 0, o = 1) {
114
+ const _ = 1 / (l.length - 1), j = ye().domain(l.map((y, q) => e + q * _ * (o - e))).range(l);
115
+ return (y) => y > o || y < e ? a : j(y);
114
116
  }
115
117
  const X = p(
116
118
  () => b(V[d.value].colors, x)
117
119
  ), K = p(
118
120
  () => b(V[d.value].colors, x, 0, 100)
119
- ), L = f(
121
+ ), A = f(
120
122
  t.modelValue.order.map(
121
- (e) => t.modelValue.mapping[e].colorIdx * 100
123
+ (l) => t.modelValue.mapping[l].colorIdx * 100
122
124
  )
123
125
  );
124
126
  Q(
125
127
  () => t.modelValue,
126
- (e) => {
127
- L.value = e.order.map(
128
- (o) => e.mapping[o].colorIdx * 100
128
+ (l) => {
129
+ A.value = l.order.map(
130
+ (a) => l.mapping[a].colorIdx * 100
129
131
  );
130
132
  }
131
133
  );
132
- function W(e) {
133
- e.forEach((o, l) => {
134
- const a = t.modelValue.order[l], _ = o / 100;
135
- t.modelValue.mapping[a].colorIdx !== _ && g("update:modelValue", {
134
+ function W(l) {
135
+ l.forEach((a, e) => {
136
+ const o = t.modelValue.order[e], _ = a / 100;
137
+ t.modelValue.mapping[o].colorIdx !== _ && g("update:modelValue", {
136
138
  ...t.modelValue,
137
139
  mapping: {
138
140
  ...t.modelValue.mapping,
139
- [a]: {
141
+ [o]: {
140
142
  colorIdx: _,
141
143
  aes: {
142
- ...t.modelValue.mapping[a].aes,
144
+ ...t.modelValue.mapping[o].aes,
143
145
  color: X.value(_)
144
146
  }
145
147
  }
@@ -147,13 +149,13 @@ const Ce = { class: "aes-mapping-block" }, ke = { style: { margin: "0 24px" } },
147
149
  });
148
150
  });
149
151
  }
150
- function Y(e) {
151
- n.value = "color", s.value = e.status ? t.modelValue.order[e.index] : null;
152
+ function Y(l) {
153
+ n.value = "color", s.value = l.status ? t.modelValue.order[l.index] : null;
152
154
  }
153
- return (e, o) => (u(), c("div", Ce, [
155
+ return (l, a) => (u(), c("div", Ce, [
154
156
  r("div", ke, [
155
157
  r("div", Se, [
156
- r("span", null, M(e.dataColumnLabel), 1)
158
+ r("span", null, M(l.dataColumnLabel), 1)
157
159
  ]),
158
160
  r("div", we, [
159
161
  C(fe, {
@@ -161,21 +163,21 @@ const Ce = { class: "aes-mapping-block" }, ke = { style: { margin: "0 24px" } },
161
163
  icon: "chevron-right",
162
164
  title: k(V)[d.value].title,
163
165
  palette: d.value,
164
- onButtonClick: o[0] || (o[0] = (l) => {
166
+ onButtonClick: a[0] || (a[0] = (e) => {
165
167
  h.value = !0, R();
166
168
  })
167
169
  }, null, 8, ["title", "palette"])
168
170
  ]),
169
- P.value ? i("", !0) : (u(), c("div", $e, [
171
+ L.value ? i("", !0) : (u(), c("div", $e, [
170
172
  C(ge, {
171
- modelValue: L.value,
173
+ modelValue: A.value,
172
174
  "onUpdate:modelValue": [
173
- o[1] || (o[1] = (l) => L.value = l),
175
+ a[1] || (a[1] = (e) => A.value = e),
174
176
  W
175
177
  ],
176
178
  colors: k(V)[d.value].colors,
177
179
  "get-color-for-percent": K.value,
178
- active: N.value,
180
+ active: U.value,
179
181
  onActive: Y
180
182
  }, null, 8, ["modelValue", "colors", "get-color-for-percent", "active"])
181
183
  ])),
@@ -183,97 +185,97 @@ const Ce = { class: "aes-mapping-block" }, ke = { style: { margin: "0 24px" } },
183
185
  key: 1,
184
186
  title: "Color Palette",
185
187
  "back-title": "Color mapping",
186
- "onForm:close": o[2] || (o[2] = (l) => h.value = !1)
188
+ "onForm:close": a[2] || (a[2] = (e) => h.value = !1)
187
189
  }, {
188
190
  default: S(() => [
189
191
  C(_e, {
190
192
  selected: d.value,
191
- onSelect: B
193
+ onSelect: D
192
194
  }, null, 8, ["selected"])
193
195
  ]),
194
196
  _: 1
195
197
  })) : i("", !0)
196
198
  ]),
197
- e.allowReordering ? (u(), c("div", Te, " Drag the rows to reorder ")) : i("", !0),
199
+ l.allowReordering ? (u(), c("div", Te, " Drag the rows to reorder ")) : i("", !0),
198
200
  r("div", {
199
201
  class: "column-values-list",
200
202
  ref_key: "optionsListRef",
201
203
  ref: E
202
204
  }, [
203
- (u(!0), c(Z, null, ee(O.value, (l) => (u(), c("div", {
204
- class: v(["column-value", { "column-value__with-reorder": e.allowReordering }])
205
+ (u(!0), c(Z, null, ee(B.value, (e) => (u(), c("div", {
206
+ class: v(["column-value", { "column-value__with-reorder": l.allowReordering }])
205
207
  }, [
206
- e.allowReordering ? (u(), c("div", Ie, [
208
+ l.allowReordering ? (u(), c("div", Ie, [
207
209
  (u(), m(le(he)))
208
210
  ])) : i("", !0),
209
- r("div", Ae, M(l.text), 1),
211
+ r("div", Ae, M(e.text), 1),
210
212
  r("div", Le, [
211
- e.allowHiding ? (u(), m(k(te), {
213
+ l.allowHiding ? (u(), m(k(te), {
212
214
  key: 0,
213
215
  "open-delay": 100,
214
216
  "close-delay": 100
215
217
  }, {
216
- tooltip: S(() => o[3] || (o[3] = [
218
+ tooltip: S(() => a[3] || (a[3] = [
217
219
  r("span", null, " Show / hide ", -1)
218
220
  ])),
219
221
  default: S(() => {
220
- var a;
222
+ var o;
221
223
  return [
222
224
  r("div", {
223
- onClick: w((_) => z(l), ["stop"]),
225
+ onClick: w((_) => z(e), ["stop"]),
224
226
  style: { cursor: "pointer" }
225
227
  }, [
226
228
  C(k(ne), {
227
- name: (a = e.modelValue.hidden) != null && a[l.value] ? "view-hide" : "view-show"
229
+ name: (o = l.modelValue.hidden) != null && o[e.value] ? "view-hide" : "view-show"
228
230
  }, null, 8, ["name"])
229
231
  ], 8, Pe)
230
232
  ];
231
233
  }),
232
234
  _: 2
233
235
  }, 1024)) : i("", !0),
234
- e.usedAesInMapping.lineType ? (u(), c("div", {
236
+ l.usedAesInMapping.lineType ? (u(), c("div", {
235
237
  key: 1,
236
238
  class: v(["column-value__aes", {
237
- aes__selected: s.value === l.value && n.value === "lineType"
239
+ aes__selected: s.value === e.value && n.value === "lineType"
238
240
  }]),
239
241
  ref_for: !0,
240
- ref: (a) => I("lineType", l, a),
241
- onClick: w((a) => A(l, "lineType"), ["stop"])
242
+ ref: (o) => T("lineType", e, o),
243
+ onClick: w((o) => I(e, "lineType"), ["stop"])
242
244
  }, [
243
245
  r("div", {
244
- class: v(["icon__line line", { [`line__${l.lineType}`]: !0 }])
246
+ class: v(["icon__line line", { [`line__${e.lineType}`]: !0 }])
245
247
  }, null, 2)
246
248
  ], 10, Re)) : i("", !0),
247
- e.usedAesInMapping.dotShape ? (u(), c("div", {
249
+ l.usedAesInMapping.dotShape ? (u(), c("div", {
248
250
  key: 2,
249
251
  class: v(["column-value__aes", {
250
- aes__selected: s.value === l.value && n.value === "dotShape"
252
+ aes__selected: s.value === e.value && n.value === "dotShape"
251
253
  }]),
252
254
  ref_for: !0,
253
- ref: (a) => I("dotShape", l, a),
254
- onClick: w((a) => A(l, "dotShape"), ["stop"])
255
+ ref: (o) => T("dotShape", e, o),
256
+ onClick: w((o) => I(e, "dotShape"), ["stop"])
255
257
  }, [
256
258
  r("div", {
257
- class: v(["dot", { [`dot__${l.dotShape}`]: !0 }])
259
+ class: v(["dot", { [`dot__${e.dotShape}`]: !0 }])
258
260
  }, null, 2)
259
261
  ], 10, Fe)) : i("", !0),
260
- e.usedAesInMapping.fill || e.usedAesInMapping.stroke ? (u(), c("div", {
262
+ l.usedAesInMapping.fill || l.usedAesInMapping.stroke ? (u(), c("div", {
261
263
  key: 3,
262
264
  class: v(["column-value__aes", {
263
- aes__selected: s.value === l.value && n.value === "color"
265
+ aes__selected: s.value === e.value && n.value === "color"
264
266
  }]),
265
267
  ref_for: !0,
266
- ref: (a) => I("color", l, a),
267
- onClick: w((a) => A(l, "color"), ["stop"])
268
+ ref: (o) => T("color", e, o),
269
+ onClick: w((o) => I(e, "color"), ["stop"])
268
270
  }, [
269
271
  r("div", {
270
272
  class: "column-value__color",
271
- style: oe({ background: l.color })
273
+ style: oe({ background: e.color })
272
274
  }, null, 4)
273
275
  ], 10, Ee)) : i("", !0),
274
- (n.value !== "color" || P.value) && n.value !== null && s.value === l.value ? (u(), m(Ve, {
276
+ (n.value !== "color" || L.value) && n.value !== null && s.value === e.value ? (u(), m(Ve, {
275
277
  key: `${n.value}_${s.value}`,
276
- targetRef: T[n.value][s.value],
278
+ targetRef: P[n.value][s.value],
277
279
  "onPopup:close": R,
278
280
  height: H.value
279
281
  }, {
@@ -284,27 +286,27 @@ const Ce = { class: "aes-mapping-block" }, ke = { style: { margin: "0 24px" } },
284
286
  n.value === "lineType" ? (u(), m(me, {
285
287
  key: 0,
286
288
  "onUpdate:modelValue": [
287
- (a) => $(l.value, "lineShape", a),
288
- (a) => l.lineType = a
289
+ (o) => $(e.value, "lineShape", o),
290
+ (o) => e.lineType = o
289
291
  ],
290
- modelValue: l.lineType
292
+ modelValue: e.lineType
291
293
  }, null, 8, ["onUpdate:modelValue", "modelValue"])) : i("", !0),
292
294
  n.value === "dotShape" ? (u(), m(pe, {
293
295
  key: 1,
294
296
  "onUpdate:modelValue": [
295
- (a) => $(l.value, "dotShape", a),
296
- (a) => l.dotShape = a
297
+ (o) => $(e.value, "dotShape", o),
298
+ (o) => e.dotShape = o
297
299
  ],
298
- modelValue: l.dotShape
300
+ modelValue: e.dotShape
299
301
  }, null, 8, ["onUpdate:modelValue", "modelValue"])) : i("", !0),
300
302
  n.value === "color" ? (u(), m(ce, {
301
303
  key: 2,
302
304
  "colors-list": F.value,
303
305
  "onUpdate:modelValue": [
304
- (a) => $(l.value, "color", a),
305
- (a) => l.color = a
306
+ (o) => $(e.value, "color", o),
307
+ (o) => e.color = o
306
308
  ],
307
- modelValue: l.color
309
+ modelValue: e.color
308
310
  }, null, 8, ["colors-list", "onUpdate:modelValue", "modelValue"])) : i("", !0)
309
311
  ])
310
312
  ]),
package/dist/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AesDataMappingDiscrete.vue.js","sources":["../../../../src/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlIcon24, PlTooltip, useSortable } from '@platforma-sdk/ui-vue';\nimport { scaleLinear } from 'd3-scale';\nimport { ComponentPublicInstance, computed, reactive, ref, watch } from 'vue';\nimport {\n DotShape,\n LineType,\n Palette\n} from './types';\nimport {\n FIXED_LINE_TYPES,\n FIXES_DOT_SHAPES,\n isCategorical,\n PALETTE_MAP, UNKNOWN_COLOR\n} from '../../constantsAesthetic';\nimport { AesType } from '../../constantsCommon';\nimport {\n AestheticMappingCategorical,\n createCategoricalMappingFromPalette\n} from '../../dataBindAes';\nimport { getPopupHeightForFixedAesList } from '../../utils/getPopupHeightForFixedAesList';\nimport FixedColorsList from './FixedColorsList.vue';\nimport FixedDotShapeList from './FixedDotShapeList.vue';\nimport FixedLineTypeList from './FixedLineTypeList.vue';\nimport FormWrapper from './FormWrapper.vue';\nimport PalettesForm from './PalettesForm.vue';\nimport MultiselectButton from '../MultiselectButton.vue';\nimport PlColorSlider from '../PlColorSlider.vue';\nimport Popup from '../Popup.vue';\nimport Reorder from '../../icons/Reorder.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}>();\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\nconst optionsList = computed(() =>\n props.modelValue.order.map((value: string) => {\n const aes = props.modelValue.mapping[value]?.aes;\n return {\n text: props.columnValueLabels[value],\n value,\n dotShape: aes?.dotShape,\n color: aes?.color,\n lineType: aes?.lineShape\n };\n })\n);\n\nfunction onPaletteSelect(value: Palette) {\n palette.value = value;\n palettesOpen.value = false;\n emit(\n 'update:modelValue',\n createCategoricalMappingFromPalette(value, props.modelValue.order)\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\nconst itemRefs = reactive<\n Record<EditableAesType, Record<string, ComponentPublicInstance | Element>>\n>({\n color: {},\n dotShape: {},\n lineType: {}\n});\n\nfunction setRef(\n type: EditableAesType,\n item: (typeof optionsList.value)[0],\n el: ComponentPublicInstance | null | Element\n) {\n if (el && !itemRefs[type][item.value]) {\n itemRefs[type][item.value] = el;\n }\n}\n\nfunction toggleForm(\n item: (typeof optionsList.value)[0],\n valueType: EditableAesType\n) {\n const isThisFormOpen =\n activeValue.value === item.value && activeAesType.value === valueType;\n activeValue.value = isThisFormOpen ? null : item.value;\n activeAesType.value = isThisFormOpen ? null : valueType;\n}\n\nfunction closeForm() {\n activeValue.value = null;\n activeAesType.value = null;\n}\n\nconst selectedColorsList = computed(() =>\n PALETTE_MAP[palette.value].colors.map((color) => ({ color, name: color }))\n);\n\nconst popupHeight = computed(() => {\n if (!activeAesType.value) {\n return 0;\n }\n return getPopupHeightForFixedAesList(\n activeAesType.value === 'lineType' ? FIXED_LINE_TYPES.length : activeAesType.value === 'dotShape' ? FIXES_DOT_SHAPES.length : selectedColorsList.value.length,\n activeAesType.value\n );\n});\n\nconst optionsListRef = ref();\n\nif (props.allowReordering) {\n useSortable(optionsListRef, {\n handle: '.column-value__reorder-icon',\n onChange(indices) {\n emit('update:modelValue', {\n ...props.modelValue,\n order: indices.map((idx) => props.modelValue.order[idx])\n });\n }\n });\n}\n\nfunction switchVisibility (option: {value: string}) {\n console.log('switch for', option.value)\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);\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</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 <multiselect-button\n label=\"Color Palette \"\n icon=\"chevron-right\"\n :title=\"PALETTE_MAP[palette].title\"\n :palette=\"palette\"\n @button-click=\"\n palettesOpen = true;\n closeForm();\n \"\n />\n </div>\n <div v-if=\"!categorical\" style=\"margin: 24px 0\">\n <pl-color-slider\n v-model=\"continuousMappingItems\"\n :colors=\"PALETTE_MAP[palette].colors\"\n :get-color-for-percent=\"colorForPercent\"\n :active=\"activeValueIndex\"\n @active=\"setActiveElementFromColorSlider\"\n @update:model-value=\"updateContinuousColors\"\n />\n </div>\n <form-wrapper\n v-if=\"palettesOpen\"\n title=\"Color Palette\"\n back-title=\"Color mapping\"\n @form:close=\"palettesOpen = false\"\n >\n <palettes-form :selected=\"palette\" @select=\"onPaletteSelect\" />\n </form-wrapper>\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\" ref=\"optionsListRef\">\n <div\n v-for=\"item of optionsList\"\n class=\"column-value\"\n :class=\"{ 'column-value__with-reorder': allowReordering }\"\n >\n <div v-if=\"allowReordering\" class=\"column-value__reorder-icon\">\n <component :is=\"Reorder\" />\n </div>\n <div class=\"column-value__title\">{{ item.text }}</div>\n <div class=\"column-value__aes-group\">\n <PlTooltip :open-delay=\"100\" :close-delay=\"100\" v-if=\"allowHiding\">\n <div @click.stop=\"switchVisibility(item)\" :style=\"{cursor: 'pointer'}\">\n <PlIcon24 :name=\"modelValue.hidden?.[item.value] ? 'view-hide' : 'view-show'\"/>\n </div>\n <template #tooltip>\n <span> Show / hide </span>\n </template>\n </PlTooltip>\n <div\n v-if=\"usedAesInMapping.lineType\"\n class=\"column-value__aes\"\n :class=\"{\n aes__selected:\n activeValue === item.value &&\n activeAesType === 'lineType'\n }\"\n :ref=\"(v) => setRef('lineType', item, v)\"\n @click.stop=\"toggleForm(item, 'lineType')\"\n >\n <div\n class=\"icon__line line\"\n :class=\"{ [`line__${item.lineType}`]: true }\"\n />\n </div>\n <div\n v-if=\"usedAesInMapping.dotShape\"\n class=\"column-value__aes\"\n :class=\"{\n aes__selected: activeValue === item.value && activeAesType === 'dotShape'\n }\"\n :ref=\"(v) => setRef('dotShape', item, v)\"\n @click.stop=\"toggleForm(item, 'dotShape')\"\n >\n <div class=\"dot\" :class=\"{ [`dot__${item.dotShape}`]: true }\" />\n </div>\n <div\n v-if=\"usedAesInMapping.fill || usedAesInMapping.stroke\"\n class=\"column-value__aes\"\n :class=\"{\n aes__selected: activeValue === item.value && activeAesType === 'color'\n }\"\n :ref=\"(v) => setRef('color', item, v)\"\n @click.stop=\"toggleForm(item, 'color')\"\n >\n <div\n class=\"column-value__color\"\n :style=\"{ background: item.color }\"\n />\n </div>\n <popup\n v-if=\"\n (activeAesType !== 'color' || categorical) &&\n activeAesType !== null &&\n activeValue === item.value\n \"\n :key=\"`${activeAesType}_${activeValue}`\"\n :targetRef=\"itemRefs[activeAesType][activeValue] as HTMLElement\"\n @popup:close=\"closeForm\"\n :height=\"popupHeight\"\n >\n <div\n class=\"fixed-aes-list\"\n :class=\"{ 'fixed-aes-list__rows': false }\"\n >\n <fixed-line-type-list\n v-if=\"activeAesType === 'lineType'\"\n @update:modelValue=\"\n (v) => onAesValueUpdate(item.value, 'lineShape', v)\n \"\n v-model=\"item.lineType as LineType\"\n />\n <fixed-dot-shape-list\n v-if=\"activeAesType === 'dotShape'\"\n @update:modelValue=\"\n (v) => onAesValueUpdate(item.value, 'dotShape', v)\n \"\n v-model=\"item.dotShape as DotShape\"\n />\n <fixed-colors-list\n v-if=\"activeAesType === 'color'\"\n :colors-list=\"selectedColorsList\"\n @update:modelValue=\"\n (v) => onAesValueUpdate(item.value, 'color', v)\n \"\n v-model=\"item.color as string\"\n />\n </div>\n </popup>\n </div>\n </div>\n </div>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","palettesOpen","ref","palette","categorical","computed","isCategorical","activeValue","activeValueIndex","activeAesType","optionsList","value","aes","_a","onPaletteSelect","createCategoricalMappingFromPalette","onAesValueUpdate","aesField","aesValue","itemRefs","reactive","setRef","type","item","el","toggleForm","valueType","isThisFormOpen","closeForm","selectedColorsList","PALETTE_MAP","color","popupHeight","getPopupHeightForFixedAesList","FIXED_LINE_TYPES","FIXES_DOT_SHAPES","optionsListRef","useSortable","indices","idx","switchVisibility","option","getColorScale","colors","unknownColor","from","to","colorStep","scale","scaleLinear","_c","v","continuousColorScale","UNKNOWN_COLOR","colorForPercent","continuousMappingItems","watch","updateContinuousColors","newColorIdx","setActiveElementFromColorSlider"],"mappings":"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"}
1
+ {"version":3,"file":"AesDataMappingDiscrete.vue.js","sources":["../../../../src/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlIcon24, PlTooltip, useSortable } from '@platforma-sdk/ui-vue';\nimport { scaleLinear } from 'd3-scale';\nimport { ComponentPublicInstance, computed, reactive, ref, watch } from 'vue';\nimport {\n DotShape,\n LineType,\n Palette\n} from './types';\nimport {\n FIXED_LINE_TYPES,\n FIXES_DOT_SHAPES,\n isCategorical,\n PALETTE_MAP, UNKNOWN_COLOR\n} from '../../constantsAesthetic';\nimport { AesType } from '../../constantsCommon';\nimport {\n AestheticMappingCategorical,\n createCategoricalMappingFromPalette\n} from '../../dataBindAes';\nimport { getPopupHeightForFixedAesList } from '../../utils/getPopupHeightForFixedAesList';\nimport FixedColorsList from './FixedColorsList.vue';\nimport FixedDotShapeList from './FixedDotShapeList.vue';\nimport FixedLineTypeList from './FixedLineTypeList.vue';\nimport FormWrapper from './FormWrapper.vue';\nimport PalettesForm from './PalettesForm.vue';\nimport MultiselectButton from '../MultiselectButton.vue';\nimport PlColorSlider from '../PlColorSlider.vue';\nimport Popup from '../Popup.vue';\nimport Reorder from '../../icons/Reorder.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\nconst optionsList = computed(() => {\n const options = props.modelValue.order.map((value: string) => {\n const aes = props.modelValue.mapping[value]?.aes;\n return {\n text: props.columnValueLabels[value],\n value,\n dotShape: aes?.dotShape,\n color: aes?.color,\n lineType: aes?.lineShape\n };\n });\n\n return props.allowNullOption ? options : options.filter(op => op.value !== 'null')\n});\n\nfunction onPaletteSelect(value: Palette) {\n palette.value = value;\n palettesOpen.value = false;\n emit(\n 'update:modelValue',\n createCategoricalMappingFromPalette(value, props.modelValue.order)\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\nconst itemRefs = reactive<\n Record<EditableAesType, Record<string, ComponentPublicInstance | Element>>\n>({\n color: {},\n dotShape: {},\n lineType: {}\n});\n\nfunction setRef(\n type: EditableAesType,\n item: (typeof optionsList.value)[0],\n el: ComponentPublicInstance | null | Element\n) {\n if (el) {\n itemRefs[type][item.value] = el;\n }\n}\n\nfunction toggleForm(\n item: (typeof optionsList.value)[0],\n valueType: EditableAesType\n) {\n const isThisFormOpen =\n activeValue.value === item.value && activeAesType.value === valueType;\n activeValue.value = isThisFormOpen ? null : item.value;\n activeAesType.value = isThisFormOpen ? null : valueType;\n}\n\nfunction closeForm() {\n activeValue.value = null;\n activeAesType.value = null;\n}\n\nconst selectedColorsList = computed(() =>\n PALETTE_MAP[palette.value].colors.map((color) => ({ color, name: color }))\n);\n\nconst popupHeight = computed(() => {\n if (!activeAesType.value) {\n return 0;\n }\n return getPopupHeightForFixedAesList(\n activeAesType.value === 'lineType' ? FIXED_LINE_TYPES.length : activeAesType.value === 'dotShape' ? FIXES_DOT_SHAPES.length : selectedColorsList.value.length,\n activeAesType.value\n );\n});\n\nconst optionsListRef = ref();\n\nif (props.allowReordering) {\n useSortable(optionsListRef, {\n handle: '.column-value__reorder-icon',\n onChange(indices) {\n emit('update:modelValue', {\n ...props.modelValue,\n order: indices.map((idx) => props.modelValue.order[idx])\n });\n }\n });\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);\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</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 <multiselect-button\n label=\"Color Palette \"\n icon=\"chevron-right\"\n :title=\"PALETTE_MAP[palette].title\"\n :palette=\"palette\"\n @button-click=\"\n palettesOpen = true;\n closeForm();\n \"\n />\n </div>\n <div v-if=\"!categorical\" style=\"margin: 24px 0\">\n <pl-color-slider\n v-model=\"continuousMappingItems\"\n :colors=\"PALETTE_MAP[palette].colors\"\n :get-color-for-percent=\"colorForPercent\"\n :active=\"activeValueIndex\"\n @active=\"setActiveElementFromColorSlider\"\n @update:model-value=\"updateContinuousColors\"\n />\n </div>\n <form-wrapper\n v-if=\"palettesOpen\"\n title=\"Color Palette\"\n back-title=\"Color mapping\"\n @form:close=\"palettesOpen = false\"\n >\n <palettes-form :selected=\"palette\" @select=\"onPaletteSelect\" />\n </form-wrapper>\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\" ref=\"optionsListRef\">\n <div\n v-for=\"item of optionsList\"\n class=\"column-value\"\n :class=\"{ 'column-value__with-reorder': allowReordering }\"\n >\n <div v-if=\"allowReordering\" class=\"column-value__reorder-icon\">\n <component :is=\"Reorder\" />\n </div>\n <div class=\"column-value__title\">{{ item.text }}</div>\n <div class=\"column-value__aes-group\">\n <PlTooltip :open-delay=\"100\" :close-delay=\"100\" v-if=\"allowHiding\">\n <div @click.stop=\"switchVisibility(item)\" :style=\"{cursor: 'pointer'}\">\n <PlIcon24 :name=\"modelValue.hidden?.[item.value] ? 'view-hide' : 'view-show'\"/>\n </div>\n <template #tooltip>\n <span> Show / hide </span>\n </template>\n </PlTooltip>\n <div\n v-if=\"usedAesInMapping.lineType\"\n class=\"column-value__aes\"\n :class=\"{\n aes__selected:\n activeValue === item.value &&\n activeAesType === 'lineType'\n }\"\n :ref=\"(v) => setRef('lineType', item, v)\"\n @click.stop=\"toggleForm(item, 'lineType')\"\n >\n <div\n class=\"icon__line line\"\n :class=\"{ [`line__${item.lineType}`]: true }\"\n />\n </div>\n <div\n v-if=\"usedAesInMapping.dotShape\"\n class=\"column-value__aes\"\n :class=\"{\n aes__selected: activeValue === item.value && activeAesType === 'dotShape'\n }\"\n :ref=\"(v) => setRef('dotShape', item, v)\"\n @click.stop=\"toggleForm(item, 'dotShape')\"\n >\n <div class=\"dot\" :class=\"{ [`dot__${item.dotShape}`]: true }\" />\n </div>\n <div\n v-if=\"usedAesInMapping.fill || usedAesInMapping.stroke\"\n class=\"column-value__aes\"\n :class=\"{\n aes__selected: activeValue === item.value && activeAesType === 'color'\n }\"\n :ref=\"(v) => setRef('color', item, v)\"\n @click.stop=\"toggleForm(item, 'color')\"\n >\n <div\n class=\"column-value__color\"\n :style=\"{ background: item.color }\"\n />\n </div>\n <popup\n v-if=\"\n (activeAesType !== 'color' || categorical) &&\n activeAesType !== null &&\n activeValue === item.value\n \"\n :key=\"`${activeAesType}_${activeValue}`\"\n :targetRef=\"itemRefs[activeAesType][activeValue] as HTMLElement\"\n @popup:close=\"closeForm\"\n :height=\"popupHeight\"\n >\n <div\n class=\"fixed-aes-list\"\n :class=\"{ 'fixed-aes-list__rows': false }\"\n >\n <fixed-line-type-list\n v-if=\"activeAesType === 'lineType'\"\n @update:modelValue=\"\n (v) => onAesValueUpdate(item.value, 'lineShape', v)\n \"\n v-model=\"item.lineType as LineType\"\n />\n <fixed-dot-shape-list\n v-if=\"activeAesType === 'dotShape'\"\n @update:modelValue=\"\n (v) => onAesValueUpdate(item.value, 'dotShape', v)\n \"\n v-model=\"item.dotShape as DotShape\"\n />\n <fixed-colors-list\n v-if=\"activeAesType === 'color'\"\n :colors-list=\"selectedColorsList\"\n @update:modelValue=\"\n (v) => onAesValueUpdate(item.value, 'color', v)\n \"\n v-model=\"item.color as string\"\n />\n </div>\n </popup>\n </div>\n </div>\n </div>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","palettesOpen","ref","palette","categorical","computed","isCategorical","activeValue","activeValueIndex","activeAesType","optionsList","options","value","aes","_a","op","onPaletteSelect","createCategoricalMappingFromPalette","onAesValueUpdate","aesField","aesValue","itemRefs","reactive","setRef","type","item","el","toggleForm","valueType","isThisFormOpen","closeForm","selectedColorsList","PALETTE_MAP","color","popupHeight","getPopupHeightForFixedAesList","FIXED_LINE_TYPES","FIXES_DOT_SHAPES","optionsListRef","useSortable","indices","idx","switchVisibility","option","getColorScale","colors","unknownColor","from","to","colorStep","scale","scaleLinear","_c","v","continuousColorScale","UNKNOWN_COLOR","colorForPercent","continuousMappingItems","watch","updateContinuousColors","newColorIdx","setActiveElementFromColorSlider","e"],"mappings":"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"}
package/dist/GraphMaker/forms/AxesSettingsForm/DiscreteAxesSettingsForm.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DiscreteAxesSettingsForm.vue.d.ts","sourceRoot":"","sources":["../../../../src/GraphMaker/forms/AxesSettingsForm/DiscreteAxesSettingsForm.vue"],"names":[],"mappings":";AAiiCA,wBAMG"}
1
+ {"version":3,"file":"DiscreteAxesSettingsForm.vue.d.ts","sourceRoot":"","sources":["../../../../src/GraphMaker/forms/AxesSettingsForm/DiscreteAxesSettingsForm.vue"],"names":[],"mappings":";AAuiCA,wBAMG"}