@mattilsynet/design 3.1.10 → 3.1.12
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.
- package/mtds/atlas/atlas-element.js +29 -36
- package/mtds/atlas/atlas-element.js.map +1 -1
- package/mtds/atlas.iife.js +4 -4
- package/mtds/atlas.js +8 -8
- package/mtds/chart/chart-axis.js +16 -15
- package/mtds/chart/chart-axis.js.map +1 -1
- package/mtds/chart/chart-bars.js +16 -18
- package/mtds/chart/chart-bars.js.map +1 -1
- package/mtds/chart/chart-element.d.ts +1 -1
- package/mtds/chart/chart-element.js +35 -34
- package/mtds/chart/chart-element.js.map +1 -1
- package/mtds/chart/chart-lines.js +29 -34
- package/mtds/chart/chart-lines.js.map +1 -1
- package/mtds/chart/chart-pies.js +11 -11
- package/mtds/chart/chart-pies.js.map +1 -1
- package/mtds/chart/chart.stories.d.ts +1 -0
- package/mtds/deprecations.js +3 -3
- package/mtds/external/robust-predicates/esm/orient2d.js +1 -1
- package/mtds/index.iife.js +17 -17
- package/mtds/package.json.js +1 -1
- package/mtds/popover/popover-observer.js +8 -8
- package/mtds/popover/popover-observer.js.map +1 -1
- package/mtds/react-atlas.js +11 -11
- package/mtds/styles.css +1 -1
- package/mtds/utils.d.ts +7 -0
- package/mtds/utils.js +47 -40
- package/mtds/utils.js.map +1 -1
- package/mtds/validation/validation-observer.js +45 -34
- package/mtds/validation/validation-observer.js.map +1 -1
- package/package.json +6 -6
package/mtds/atlas.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { MATGEO_URL as r, MTDSAtlasElement as o } from "./atlas/atlas-element.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
2
|
+
import { default as m } from "./external/leaflet/dist/leaflet-src.js";
|
|
3
|
+
import { MTDSAtlasMarkerElement as M } from "./atlas/atlas-marker.js";
|
|
4
|
+
import { MTDSAtlasMatgeoElement as p } from "./atlas/atlas-matgeo.js";
|
|
5
|
+
import { MTDSAtlasWMSElement as x } from "./atlas/atlas-wms.js";
|
|
6
6
|
export {
|
|
7
|
-
|
|
7
|
+
m as L,
|
|
8
8
|
r as MATGEO_URL,
|
|
9
9
|
o as MTDSAtlasElement,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
M as MTDSAtlasMarkerElement,
|
|
11
|
+
p as MTDSAtlasMatgeoElement,
|
|
12
|
+
x as MTDSAtlasWMSElement
|
|
13
13
|
};
|
|
14
14
|
//# sourceMappingURL=atlas.js.map
|
package/mtds/chart/chart-axis.js
CHANGED
|
@@ -1,21 +1,22 @@
|
|
|
1
|
-
import { tag as
|
|
2
|
-
const
|
|
3
|
-
function
|
|
4
|
-
const g = d === "stacked", l =
|
|
5
|
-
const m =
|
|
6
|
-
return Math.max(
|
|
7
|
-
}, 0),
|
|
8
|
-
"aria-label":
|
|
1
|
+
import { tag as r } from "../utils.js";
|
|
2
|
+
const S = [0.1, 0.2, 0.25, 0.5, 1];
|
|
3
|
+
function M(e, { aspect: c, type: d }) {
|
|
4
|
+
const g = d === "stacked", l = e[0].reduce((s, u, f) => {
|
|
5
|
+
const m = e.map((a) => a[f].number), k = m.reduce((a, v) => a + v, 0);
|
|
6
|
+
return Math.max(s, ...g ? [k] : m);
|
|
7
|
+
}, 0), i = l / 10, p = 10 ** `${Math.round(i)}`.length, h = i / p, o = (S.find((s) => s > h) || 1) * p, n = Math.ceil(l / o) * o, t = r("div", {
|
|
8
|
+
"aria-label": e[0][0].value || null,
|
|
9
9
|
class: "axis",
|
|
10
|
-
role: "figure"
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
role: "figure"
|
|
11
|
+
});
|
|
12
|
+
c && t.style.setProperty("--mtdsc-chart-aspect", c), t.style.setProperty("--bars", `${e[0]?.length - 1}`), t.style.setProperty("--groups", `${e.length - 1}`), t.style.setProperty("--total", `${n}`);
|
|
13
|
+
const x = t.appendChild(r("div", { class: "axisSteps" })), y = t.appendChild(r("div", { class: "axisGroups" }));
|
|
14
|
+
return Array.from({ length: n / o + 1 }, (s, u) => b(o * u)).reverse().map(
|
|
15
|
+
(s) => x.append(r("div", { class: "axisStep", "data-label": s }))
|
|
16
|
+
), { total: n, groups: y, axis: t };
|
|
16
17
|
}
|
|
17
18
|
const b = new Intl.NumberFormat().format;
|
|
18
19
|
export {
|
|
19
|
-
|
|
20
|
+
M as toAxis
|
|
20
21
|
};
|
|
21
22
|
//# sourceMappingURL=chart-axis.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart-axis.js","sources":["../../designsystem/chart/chart-axis.ts"],"sourcesContent":["import { tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Config = { type: string; aspect?: string };\n\nconst STEPS = [0.1, 0.2, 0.25, 0.5, 1];\n\nexport function toAxis(data: ChartData, { aspect, type }: Config) {\n\tconst totalTicks = 10;\n\tconst isStacked = type === \"stacked\";\n\tconst max = data[0].reduce((acc, _, index) => {\n\t\tconst all = data.map((row) => row[index].number);\n\t\tconst sum = all.reduce((acc, num) => acc + num, 0);\n\t\treturn Math.max(acc, ...(isStacked ? [sum] : all));\n\t}, 0);\n\n\tconst tickRange = max / totalTicks;\n\tconst tickDigits = 10 ** `${Math.round(tickRange)}`.length; // Get amount of digits in total number and use as exponent for 10x\n\tconst tickSize = tickRange / tickDigits; // Get amount of digits in total number and use as exponent for 10\n\tconst step = (STEPS.find((current) => current > tickSize) || 1) * tickDigits; // Find closest step larger than tick\n\tconst total = Math.ceil(max / step) * step;\n\tconst axis = tag(\"div\", {\n\t\t\"aria-label\": data[0][0].value || null,\n\t\tclass: \"axis\",\n\t\trole: \"figure\",\n\t\
|
|
1
|
+
{"version":3,"file":"chart-axis.js","sources":["../../designsystem/chart/chart-axis.ts"],"sourcesContent":["import { tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Config = { type: string; aspect?: string };\n\nconst STEPS = [0.1, 0.2, 0.25, 0.5, 1];\n\nexport function toAxis(data: ChartData, { aspect, type }: Config) {\n\tconst totalTicks = 10;\n\tconst isStacked = type === \"stacked\";\n\tconst max = data[0].reduce((acc, _, index) => {\n\t\tconst all = data.map((row) => row[index].number);\n\t\tconst sum = all.reduce((acc, num) => acc + num, 0);\n\t\treturn Math.max(acc, ...(isStacked ? [sum] : all));\n\t}, 0);\n\n\tconst tickRange = max / totalTicks;\n\tconst tickDigits = 10 ** `${Math.round(tickRange)}`.length; // Get amount of digits in total number and use as exponent for 10x\n\tconst tickSize = tickRange / tickDigits; // Get amount of digits in total number and use as exponent for 10\n\tconst step = (STEPS.find((current) => current > tickSize) || 1) * tickDigits; // Find closest step larger than tick\n\tconst total = Math.ceil(max / step) * step;\n\tconst axis = tag(\"div\", {\n\t\t\"aria-label\": data[0][0].value || null,\n\t\tclass: \"axis\",\n\t\trole: \"figure\",\n\t});\n\tif (aspect) axis.style.setProperty(\"--mtdsc-chart-aspect\", aspect);\n\taxis.style.setProperty(\"--bars\", `${data[0]?.length - 1}`);\n\taxis.style.setProperty(\"--groups\", `${data.length - 1}`);\n\taxis.style.setProperty(\"--total\", `${total}`);\n\tconst steps = axis.appendChild(tag(\"div\", { class: \"axisSteps\" }));\n\tconst groups = axis.appendChild(tag(\"div\", { class: \"axisGroups\" }));\n\n\tArray.from({ length: total / step + 1 }, (_, i) => getNum(step * i))\n\t\t.reverse()\n\t\t.map((num) =>\n\t\t\tsteps.append(tag(\"div\", { class: \"axisStep\", \"data-label\": num })),\n\t\t);\n\n\treturn { total, groups, axis };\n}\n\nconst getNum = new Intl.NumberFormat().format;\n"],"names":["STEPS","toAxis","data","aspect","type","isStacked","max","acc","_","index","all","row","sum","num","tickRange","tickDigits","tickSize","step","current","total","axis","tag","steps","groups","i","getNum"],"mappings":";AAKA,MAAMA,IAAQ,CAAC,KAAK,KAAK,MAAM,KAAK,CAAC;AAE9B,SAASC,EAAOC,GAAiB,EAAE,QAAAC,GAAQ,MAAAC,KAAgB;AAEjE,QAAMC,IAAYD,MAAS,WACrBE,IAAMJ,EAAK,CAAC,EAAE,OAAO,CAACK,GAAKC,GAAGC,MAAU;AAC7C,UAAMC,IAAMR,EAAK,IAAI,CAACS,MAAQA,EAAIF,CAAK,EAAE,MAAM,GACzCG,IAAMF,EAAI,OAAO,CAACH,GAAKM,MAAQN,IAAMM,GAAK,CAAC;AACjD,WAAO,KAAK,IAAIN,GAAK,GAAIF,IAAY,CAACO,CAAG,IAAIF,CAAI;AAAA,EAClD,GAAG,CAAC,GAEEI,IAAYR,IAAM,IAClBS,IAAa,MAAM,GAAG,KAAK,MAAMD,CAAS,CAAC,GAAG,QAC9CE,IAAWF,IAAYC,GACvBE,KAAQjB,EAAM,KAAK,CAACkB,MAAYA,IAAUF,CAAQ,KAAK,KAAKD,GAC5DI,IAAQ,KAAK,KAAKb,IAAMW,CAAI,IAAIA,GAChCG,IAAOC,EAAI,OAAO;AAAA,IACvB,cAAcnB,EAAK,CAAC,EAAE,CAAC,EAAE,SAAS;AAAA,IAClC,OAAO;AAAA,IACP,MAAM;AAAA,EAAA,CACN;AACD,EAAIC,KAAQiB,EAAK,MAAM,YAAY,wBAAwBjB,CAAM,GACjEiB,EAAK,MAAM,YAAY,UAAU,GAAGlB,EAAK,CAAC,GAAG,SAAS,CAAC,EAAE,GACzDkB,EAAK,MAAM,YAAY,YAAY,GAAGlB,EAAK,SAAS,CAAC,EAAE,GACvDkB,EAAK,MAAM,YAAY,WAAW,GAAGD,CAAK,EAAE;AAC5C,QAAMG,IAAQF,EAAK,YAAYC,EAAI,OAAO,EAAE,OAAO,YAAA,CAAa,CAAC,GAC3DE,IAASH,EAAK,YAAYC,EAAI,OAAO,EAAE,OAAO,aAAA,CAAc,CAAC;AAEnE,eAAM,KAAK,EAAE,QAAQF,IAAQF,IAAO,KAAK,CAACT,GAAGgB,MAAMC,EAAOR,IAAOO,CAAC,CAAC,EACjE,UACA;AAAA,IAAI,CAACX,MACLS,EAAM,OAAOD,EAAI,OAAO,EAAE,OAAO,YAAY,cAAcR,GAAK,CAAC;AAAA,EAAA,GAG5D,EAAE,OAAAM,GAAO,QAAAI,GAAQ,MAAAH,EAAA;AACzB;AAEA,MAAMK,IAAS,IAAI,KAAK,aAAA,EAAe;"}
|
package/mtds/chart/chart-bars.js
CHANGED
|
@@ -1,24 +1,22 @@
|
|
|
1
|
-
import { tag as
|
|
2
|
-
function
|
|
3
|
-
return
|
|
4
|
-
const
|
|
5
|
-
|
|
1
|
+
import { tag as a } from "../utils.js";
|
|
2
|
+
function u(r) {
|
|
3
|
+
return r[0].slice(1).map(({ value: s, event: l }, n) => {
|
|
4
|
+
const o = a("div", { class: "axisGroup", "data-label": s }), i = o.appendChild(
|
|
5
|
+
a("div", { class: "axisGroupContent" })
|
|
6
6
|
);
|
|
7
|
-
return
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
)
|
|
18
|
-
), i;
|
|
7
|
+
return r.slice(1).map((e) => e[n + 1]).map(({ tooltip: e, color: p, number: c }) => {
|
|
8
|
+
const t = a("div", {
|
|
9
|
+
"aria-label": e,
|
|
10
|
+
"data-event": l,
|
|
11
|
+
class: "bar",
|
|
12
|
+
role: "img",
|
|
13
|
+
tabindex: "0"
|
|
14
|
+
});
|
|
15
|
+
return t.style.setProperty("--color", p), t.style.setProperty("--value", `${c}`), i.appendChild(t);
|
|
16
|
+
}), o;
|
|
19
17
|
});
|
|
20
18
|
}
|
|
21
19
|
export {
|
|
22
|
-
|
|
20
|
+
u as toBars
|
|
23
21
|
};
|
|
24
22
|
//# sourceMappingURL=chart-bars.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart-bars.js","sources":["../../designsystem/chart/chart-bars.ts"],"sourcesContent":["import { tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\nexport function toBars(data: ChartData) {\n\treturn data[0].slice(1).map(({ value, event }, index) => {\n\t\tconst group = tag(\"div\", { class: \"axisGroup\", \"data-label\": value });\n\t\tconst content = group.appendChild(\n\t\t\ttag(\"div\", { class: \"axisGroupContent\" }),\n\t\t);\n\n\t\tdata\n\t\t\t.slice(1)\n\t\t\t.map((values) => values[index + 1])\n\t\t\t.map(({ tooltip,
|
|
1
|
+
{"version":3,"file":"chart-bars.js","sources":["../../designsystem/chart/chart-bars.ts"],"sourcesContent":["import { tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\nexport function toBars(data: ChartData) {\n\treturn data[0].slice(1).map(({ value, event }, index) => {\n\t\tconst group = tag(\"div\", { class: \"axisGroup\", \"data-label\": value });\n\t\tconst content = group.appendChild(\n\t\t\ttag(\"div\", { class: \"axisGroupContent\" }),\n\t\t);\n\n\t\tdata\n\t\t\t.slice(1)\n\t\t\t.map((values) => values[index + 1])\n\t\t\t.map(({ tooltip, color, number }) => {\n\t\t\t\tconst el = tag(\"div\", {\n\t\t\t\t\t\"aria-label\": tooltip,\n\t\t\t\t\t\"data-event\": event,\n\t\t\t\t\tclass: \"bar\",\n\t\t\t\t\trole: \"img\",\n\t\t\t\t\ttabindex: \"0\",\n\t\t\t\t});\n\t\t\t\tel.style.setProperty(\"--color\", color);\n\t\t\t\tel.style.setProperty(\"--value\", `${number}`);\n\t\t\t\treturn content.appendChild(el);\n\t\t\t});\n\t\treturn group;\n\t});\n}\n"],"names":["toBars","data","value","event","index","group","tag","content","values","tooltip","color","number","el"],"mappings":";AAGO,SAASA,EAAOC,GAAiB;AACvC,SAAOA,EAAK,CAAC,EAAE,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,OAAAC,GAAO,OAAAC,EAAA,GAASC,MAAU;AACxD,UAAMC,IAAQC,EAAI,OAAO,EAAE,OAAO,aAAa,cAAcJ,GAAO,GAC9DK,IAAUF,EAAM;AAAA,MACrBC,EAAI,OAAO,EAAE,OAAO,oBAAoB;AAAA,IAAA;AAGzC,WAAAL,EACE,MAAM,CAAC,EACP,IAAI,CAACO,MAAWA,EAAOJ,IAAQ,CAAC,CAAC,EACjC,IAAI,CAAC,EAAE,SAAAK,GAAS,OAAAC,GAAO,QAAAC,QAAa;AACpC,YAAMC,IAAKN,EAAI,OAAO;AAAA,QACrB,cAAcG;AAAA,QACd,cAAcN;AAAA,QACd,OAAO;AAAA,QACP,MAAM;AAAA,QACN,UAAU;AAAA,MAAA,CACV;AACD,aAAAS,EAAG,MAAM,YAAY,WAAWF,CAAK,GACrCE,EAAG,MAAM,YAAY,WAAW,GAAGD,CAAM,EAAE,GACpCJ,EAAQ,YAAYK,CAAE;AAAA,IAC9B,CAAC,GACKP;AAAA,EACR,CAAC;AACF;"}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import v from "../styles.module.css.js";
|
|
2
|
-
import { isBrowser as C, tag as
|
|
3
|
-
import
|
|
4
|
-
import { toAxis as
|
|
5
|
-
import { toBars as
|
|
6
|
-
import { toLines as
|
|
2
|
+
import { isBrowser as C, tag as p, defineElement as E, MTDSElement as $, onMutation as k, on as T, off as w, attr as d, attachStyle as S, debounce as x } from "../utils.js";
|
|
3
|
+
import A from "./chart.css.js";
|
|
4
|
+
import { toAxis as L } from "./chart-axis.js";
|
|
5
|
+
import { toBars as O } from "./chart-bars.js";
|
|
6
|
+
import { toLines as P } from "./chart-lines.js";
|
|
7
7
|
import { toPies as R } from "./chart-pies.js";
|
|
8
|
-
const
|
|
8
|
+
const u = "click keydown mousemove mouseout", f = "mtds-chart-tooltip", i = C() ? document.getElementById(f) || p("div", {
|
|
9
9
|
"aria-hidden": "true",
|
|
10
10
|
class: v._tooltip,
|
|
11
11
|
hidden: "",
|
|
12
|
-
id:
|
|
12
|
+
id: f
|
|
13
13
|
}) : null;
|
|
14
|
-
class
|
|
14
|
+
class q extends $ {
|
|
15
15
|
#t;
|
|
16
16
|
#e;
|
|
17
17
|
static get observedAttributes() {
|
|
@@ -21,69 +21,70 @@ class P extends k {
|
|
|
21
21
|
super(), this.attachShadow({ mode: "open" });
|
|
22
22
|
}
|
|
23
23
|
connectedCallback() {
|
|
24
|
-
const e =
|
|
25
|
-
t.observe(this), this.#e = () => t.disconnect(), this.#t =
|
|
24
|
+
const e = x(() => this.attributeChangedCallback(), 100), t = new ResizeObserver(() => this.handleResize());
|
|
25
|
+
t.observe(this), this.#e = () => t.disconnect(), this.#t = k(this, e, {
|
|
26
26
|
attributeFilter: ["data-tooltip"],
|
|
27
27
|
attributes: !0,
|
|
28
28
|
characterData: !0,
|
|
29
29
|
childList: !0,
|
|
30
30
|
subtree: !0
|
|
31
|
-
}), requestAnimationFrame(() => this.attributeChangedCallback()),
|
|
31
|
+
}), requestAnimationFrame(() => this.attributeChangedCallback()), T(this, u, this);
|
|
32
32
|
}
|
|
33
33
|
disconnectedCallback() {
|
|
34
|
-
i && (i.hidden = !0),
|
|
34
|
+
i && (i.hidden = !0), w(this, u, this), this.#e?.(), this.#t?.(), this.#t = this.#e = void 0;
|
|
35
35
|
}
|
|
36
36
|
attributeChangedCallback() {
|
|
37
|
-
const e =
|
|
37
|
+
const e = H(this.querySelector("table"));
|
|
38
38
|
if (!e[0]) return;
|
|
39
|
-
Array.from(this.shadowRoot?.children || []).map((
|
|
40
|
-
const [t, r] = (
|
|
39
|
+
Array.from(this.shadowRoot?.children || []).map((l) => l.remove());
|
|
40
|
+
const [t, r] = (d(this, "data-variant") || "column").split("-"), s = d(this, "data-aspect") || void 0, a = p("div", {
|
|
41
41
|
"aria-hidden": "hidden",
|
|
42
42
|
class: "legends",
|
|
43
43
|
role: "group"
|
|
44
44
|
});
|
|
45
|
-
e.slice(1).forEach(([{ value:
|
|
46
|
-
|
|
45
|
+
e.slice(1).forEach(([{ value: l, color: y }]) => {
|
|
46
|
+
const g = p("div", { class: "legend" }, l);
|
|
47
|
+
a.appendChild(g).style.setProperty("--color", y);
|
|
47
48
|
});
|
|
48
|
-
const { axis:
|
|
49
|
-
(t === "column" || t === "bar") && n.append(...
|
|
49
|
+
const { axis: h, groups: n, total: c } = L(e, { aspect: s, type: r });
|
|
50
|
+
(t === "column" || t === "bar") && n.append(...O(e)), (t === "line" || t === "area") && n.append(P(e, { total: c, variant: t, type: r })), (t === "doughnut" || t === "pie") && this.shadowRoot?.append(R(e, { aspect: s, variant: t })), this.shadowRoot?.append(h, a), S(this, A);
|
|
50
51
|
}
|
|
51
52
|
handleEvent(e) {
|
|
52
|
-
e.type === "click" || e.type === "keydown" ?
|
|
53
|
+
e.type === "click" || e.type === "keydown" ? z(e, this) : D(e);
|
|
53
54
|
}
|
|
54
55
|
handleResize() {
|
|
55
56
|
const e = this.shadowRoot?.firstElementChild, t = e?.firstElementChild;
|
|
56
57
|
e?.classList.toggle("axisStepsYHalf", (t?.offsetHeight || 0) < 400), e?.classList.toggle("axisStepsXHalf", (t?.offsetWidth || 0) < 500);
|
|
57
58
|
}
|
|
58
59
|
}
|
|
59
|
-
function
|
|
60
|
+
function z(o, e) {
|
|
60
61
|
if (o instanceof KeyboardEvent && o.key !== "Enter") return;
|
|
61
|
-
const t = o.composedPath()[0], r = e.querySelector("table"), [s, a] = t instanceof Element &&
|
|
62
|
+
const t = o.composedPath()[0], r = e.querySelector("table"), [s, a] = t instanceof Element && d(t, "data-event")?.split("-").map(Number) || [];
|
|
62
63
|
r?.rows[s]?.cells[a]?.querySelector("a,button")?.click?.();
|
|
63
64
|
}
|
|
64
|
-
let
|
|
65
|
-
function
|
|
65
|
+
let b = "";
|
|
66
|
+
function D(o) {
|
|
66
67
|
if (!i) return;
|
|
67
68
|
i?.isConnected || document.body.append(i);
|
|
68
69
|
const e = o.composedPath()[0], t = e instanceof Element && e.getAttribute("aria-label") || "";
|
|
69
|
-
t && (i.style.transform = `translate(${Math.min(o.clientX, window.innerWidth)}px, ${o.clientY}px)`), t !==
|
|
70
|
+
t && (i.style.transform = `translate(${Math.min(o.clientX, window.innerWidth)}px, ${o.clientY}px)`), t !== b && (t && (i.textContent = t), b = t, i.hidden = !t);
|
|
70
71
|
}
|
|
71
|
-
const
|
|
72
|
+
const m = (o) => o?.textContent?.trim() || "", H = (o) => Array.from(o?.rows || []).map(
|
|
72
73
|
(e, t, { length: r }) => Array.from(e.cells, (s, a) => {
|
|
73
|
-
const
|
|
74
|
-
return
|
|
75
|
-
number: a && t && Number.parseFloat(
|
|
74
|
+
const h = m(e.cells[0]), n = m(o?.rows[0].cells[a]), c = m(s), l = r === 2 ? `${n}: ${c}` : `${h}: ${c}${n ? ` (${n})` : ""}`;
|
|
75
|
+
return d(s, "tabindex", "-1"), {
|
|
76
|
+
number: a && t && Number.parseFloat(c) || 0,
|
|
76
77
|
// First row and column is not a number
|
|
77
78
|
event: s.querySelector("a,button") && `${t}-${a}`,
|
|
78
79
|
// Reference to proxy events
|
|
79
|
-
|
|
80
|
-
value:
|
|
81
|
-
tooltip:
|
|
80
|
+
color: `var(--mtdsc-chart-color-${t}-${a}, var(--mtdsc-chart-color-${t}, var(--mtdsc-chart-color-base)))`,
|
|
81
|
+
value: c,
|
|
82
|
+
tooltip: d(s, "data-tooltip") || l
|
|
82
83
|
};
|
|
83
84
|
})
|
|
84
85
|
);
|
|
85
|
-
E("mtds-chart",
|
|
86
|
+
E("mtds-chart", q);
|
|
86
87
|
export {
|
|
87
|
-
|
|
88
|
+
q as MTDSChartElement
|
|
88
89
|
};
|
|
89
90
|
//# sourceMappingURL=chart-element.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart-element.js","sources":["../../designsystem/chart/chart-element.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\tattr,\n\tdebounce,\n\tdefineElement,\n\tisBrowser,\n\tMTDSElement,\n\toff,\n\ton,\n\tonMutation,\n\ttag,\n} from \"../utils\";\nimport css from \"./chart.css?raw\";\nimport { toAxis } from \"./chart-axis\";\nimport { toBars } from \"./chart-bars\";\nimport { toLines } from \"./chart-lines\";\nimport { toPies } from \"./chart-pies\";\n\nexport type ChartData = ReturnType<typeof toData>;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-chart\": MTDSChartElement;\n\t}\n}\n\nconst EVENTS = \"click keydown mousemove mouseout\";\nconst TOOLTIP_ID = \"mtds-chart-tooltip\";\nconst TOOLTIP = isBrowser()\n\t? document.getElementById(TOOLTIP_ID) ||\n\t\ttag(\"div\", {\n\t\t\t\"aria-hidden\": \"true\",\n\t\t\tclass: styles._tooltip,\n\t\t\thidden: \"\",\n\t\t\tid: TOOLTIP_ID,\n\t\t})\n\t: null;\n\nexport class MTDSChartElement extends MTDSElement {\n\t#unmutate?: () => void;\n\t#unresize?: () => void;\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-variant\", \"data-aspect\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" });\n\t}\n\tconnectedCallback() {\n\t\tconst render = debounce(() => this.attributeChangedCallback(), 100);\n\t\tconst resize = new ResizeObserver(() => this.handleResize());\n\t\tresize.observe(this);\n\t\tthis.#unresize = () => resize.disconnect();\n\t\tthis.#unmutate = onMutation(this, render, {\n\t\t\tattributeFilter: [\"data-tooltip\"],\n\t\t\tattributes: true,\n\t\t\tcharacterData: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t});\n\t\trequestAnimationFrame(() => this.attributeChangedCallback()); // Initial setup when children is mounted\n\t\ton(this, EVENTS, this);\n\t}\n\tdisconnectedCallback() {\n\t\tif (TOOLTIP) TOOLTIP.hidden = true;\n\t\toff(this, EVENTS, this);\n\t\tthis.#unresize?.();\n\t\tthis.#unmutate?.();\n\t\tthis.#unmutate = this.#unresize = undefined;\n\t}\n\tattributeChangedCallback() {\n\t\tconst data = toData(this.querySelector(\"table\"));\n\t\tif (!data[0]) return; // We require at least one row\n\n\t\tArray.from(this.shadowRoot?.children || []).map((el) => el.remove()); // Clear shadowRoot\n\t\tconst [variant, type] = (attr(this, \"data-variant\") || \"column\").split(\"-\");\n\t\tconst aspect = attr(this, \"data-aspect\") || undefined;\n\t\tconst style = tag(\"style\", {}, css);\n\t\tconst legend = tag(\"div\", {\n\t\t\t\"aria-hidden\": \"hidden\",\n\t\t\tclass: \"legends\",\n\t\t\trole: \"group\",\n\t\t});\n\t\tdata.slice(1).forEach(([{ value, style }]) => {\n\t\t\tlegend.appendChild(tag(\"div\", { class: \"legend\", style }, value));\n\t\t});\n\n\t\tconst { axis, groups, total } = toAxis(data, { aspect, type });\n\t\tif (variant === \"column\" || variant === \"bar\")\n\t\t\tgroups.append(...toBars(data));\n\t\tif (variant === \"line\" || variant === \"area\")\n\t\t\tgroups.append(toLines(data, { total, variant, type }));\n\t\tif (variant === \"doughnut\" || variant === \"pie\")\n\t\t\tthis.shadowRoot?.append(toPies(data, { aspect, variant }));\n\n\t\tthis.shadowRoot?.append(axis, legend, style); // Axis must be first\n\t}\n\thandleEvent(e: Event) {\n\t\tif (e.type === \"click\" || e.type === \"keydown\") onClick(e, this);\n\t\telse onMoveTooltip(e as MouseEvent);\n\t}\n\thandleResize() {\n\t\tconst axis = this.shadowRoot?.firstElementChild as HTMLElement | null;\n\t\tconst steps = axis?.firstElementChild as HTMLElement | null;\n\t\taxis?.classList.toggle(\"axisStepsYHalf\", (steps?.offsetHeight || 0) < 400);\n\t\taxis?.classList.toggle(\"axisStepsXHalf\", (steps?.offsetWidth || 0) < 500);\n\t}\n}\n\nfunction onClick(event: Event, self: MTDSChartElement) {\n\tif (event instanceof KeyboardEvent && event.key !== \"Enter\") return; // Only handle enter key\n\tconst el = event.composedPath()[0];\n\tconst table = self.querySelector(\"table\");\n\tconst [tr, td] =\n\t\t(el instanceof Element && attr(el, \"data-event\")?.split(\"-\").map(Number)) ||\n\t\t[];\n\n\ttable?.rows[tr]?.cells[td]?.querySelector<HTMLElement>(\"a,button\")?.click?.();\n}\n\nlet TOOLTIP_TEXT = \"\";\nfunction onMoveTooltip(event: MouseEvent) {\n\tif (!TOOLTIP) return;\n\tif (!TOOLTIP?.isConnected) document.body.append(TOOLTIP); // Ensure connected\n\n\tconst el = event.composedPath()[0];\n\tconst tip = (el instanceof Element && el.getAttribute(\"aria-label\")) || \"\";\n\n\tif (tip)\n\t\tTOOLTIP.style.transform = `translate(${Math.min(event.clientX, window.innerWidth)}px, ${event.clientY}px)`;\n\tif (tip !== TOOLTIP_TEXT) {\n\t\tif (tip) TOOLTIP.textContent = tip;\n\t\tTOOLTIP_TEXT = tip;\n\t\tTOOLTIP.hidden = !tip;\n\t}\n}\n\nconst text = (el?: Element | null) => el?.textContent?.trim() || \"\"; // Helper to get trimmed text\nconst toData = (table?: HTMLTableElement | null) =>\n\tArray.from(table?.rows || []).map((row, rowIndex, { length }) =>\n\t\tArray.from(row.cells, (cell, cellIndex) => {\n\t\t\tconst rowHeading = text(row.cells[0]);\n\t\t\tconst colHeading = text(table?.rows[0].cells[cellIndex]);\n\t\t\tconst value = text(cell);\n\t\t\tconst tooltip =\n\t\t\t\tlength === 2 // If only header and one row, use simple tooltip only showing value\n\t\t\t\t\t? `${colHeading}: ${value}`\n\t\t\t\t\t: `${rowHeading}: ${value}${colHeading ? ` (${colHeading})` : \"\"}`;\n\t\t\tattr(cell, \"tabindex\", \"-1\");\n\n\t\t\treturn {\n\t\t\t\tnumber: (cellIndex && rowIndex && Number.parseFloat(value)) || 0, // First row and column is not a number\n\t\t\t\tevent: cell.querySelector(\"a,button\") && `${rowIndex}-${cellIndex}`, // Reference to proxy events\n\t\t\t\tstyle: `--color: var(--mtdsc-chart-color-${rowIndex}, var(--mtdsc-chart-color-base))`,\n\t\t\t\tvalue,\n\t\t\t\ttooltip: attr(cell, \"data-tooltip\") || tooltip,\n\t\t\t};\n\t\t}),\n\t);\n\ndefineElement(\"mtds-chart\", MTDSChartElement);\n"],"names":["EVENTS","TOOLTIP_ID","TOOLTIP","isBrowser","tag","styles","MTDSChartElement","MTDSElement","#unmutate","#unresize","render","debounce","resize","onMutation","on","off","data","toData","el","variant","type","attr","aspect","style","css","legend","value","axis","groups","total","toAxis","toBars","toLines","toPies","onClick","steps","event","self","table","tr","td","TOOLTIP_TEXT","onMoveTooltip","tip","text","row","rowIndex","length","cell","cellIndex","rowHeading","colHeading","tooltip","defineElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"chart-element.js","sources":["../../designsystem/chart/chart-element.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\tattachStyle,\n\tattr,\n\tdebounce,\n\tdefineElement,\n\tisBrowser,\n\tMTDSElement,\n\toff,\n\ton,\n\tonMutation,\n\ttag,\n} from \"../utils\";\nimport css from \"./chart.css?raw\";\nimport { toAxis } from \"./chart-axis\";\nimport { toBars } from \"./chart-bars\";\nimport { toLines } from \"./chart-lines\";\nimport { toPies } from \"./chart-pies\";\n\nexport type ChartData = ReturnType<typeof toData>;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-chart\": MTDSChartElement;\n\t}\n}\n\nconst EVENTS = \"click keydown mousemove mouseout\";\nconst TOOLTIP_ID = \"mtds-chart-tooltip\";\nconst TOOLTIP = isBrowser()\n\t? document.getElementById(TOOLTIP_ID) ||\n\t\ttag(\"div\", {\n\t\t\t\"aria-hidden\": \"true\",\n\t\t\tclass: styles._tooltip,\n\t\t\thidden: \"\",\n\t\t\tid: TOOLTIP_ID,\n\t\t})\n\t: null;\n\nexport class MTDSChartElement extends MTDSElement {\n\t#unmutate?: () => void;\n\t#unresize?: () => void;\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-variant\", \"data-aspect\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" });\n\t}\n\tconnectedCallback() {\n\t\tconst render = debounce(() => this.attributeChangedCallback(), 100);\n\t\tconst resize = new ResizeObserver(() => this.handleResize());\n\t\tresize.observe(this);\n\t\tthis.#unresize = () => resize.disconnect();\n\t\tthis.#unmutate = onMutation(this, render, {\n\t\t\tattributeFilter: [\"data-tooltip\"],\n\t\t\tattributes: true,\n\t\t\tcharacterData: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t});\n\t\trequestAnimationFrame(() => this.attributeChangedCallback()); // Initial setup when children is mounted\n\t\ton(this, EVENTS, this);\n\t}\n\tdisconnectedCallback() {\n\t\tif (TOOLTIP) TOOLTIP.hidden = true;\n\t\toff(this, EVENTS, this);\n\t\tthis.#unresize?.();\n\t\tthis.#unmutate?.();\n\t\tthis.#unmutate = this.#unresize = undefined;\n\t}\n\tattributeChangedCallback() {\n\t\tconst data = toData(this.querySelector(\"table\"));\n\t\tif (!data[0]) return; // We require at least one row\n\n\t\tArray.from(this.shadowRoot?.children || []).map((el) => el.remove()); // Clear shadowRoot\n\t\tconst [variant, type] = (attr(this, \"data-variant\") || \"column\").split(\"-\");\n\t\tconst aspect = attr(this, \"data-aspect\") || undefined;\n\t\tconst legend = tag(\"div\", {\n\t\t\t\"aria-hidden\": \"hidden\",\n\t\t\tclass: \"legends\",\n\t\t\trole: \"group\",\n\t\t});\n\t\tdata.slice(1).forEach(([{ value, color }]) => {\n\t\t\tconst el = tag(\"div\", { class: \"legend\" }, value);\n\t\t\tlegend.appendChild(el).style.setProperty(\"--color\", color);\n\t\t});\n\n\t\tconst { axis, groups, total } = toAxis(data, { aspect, type });\n\t\tif (variant === \"column\" || variant === \"bar\")\n\t\t\tgroups.append(...toBars(data));\n\t\tif (variant === \"line\" || variant === \"area\")\n\t\t\tgroups.append(toLines(data, { total, variant, type }));\n\t\tif (variant === \"doughnut\" || variant === \"pie\")\n\t\t\tthis.shadowRoot?.append(toPies(data, { aspect, variant }));\n\n\t\tthis.shadowRoot?.append(axis, legend); // Axis must be first\n\t\tattachStyle(this, css);\n\t}\n\thandleEvent(e: Event) {\n\t\tif (e.type === \"click\" || e.type === \"keydown\") onClick(e, this);\n\t\telse onMoveTooltip(e as MouseEvent);\n\t}\n\thandleResize() {\n\t\tconst axis = this.shadowRoot?.firstElementChild as HTMLElement | null;\n\t\tconst steps = axis?.firstElementChild as HTMLElement | null;\n\t\taxis?.classList.toggle(\"axisStepsYHalf\", (steps?.offsetHeight || 0) < 400);\n\t\taxis?.classList.toggle(\"axisStepsXHalf\", (steps?.offsetWidth || 0) < 500);\n\t}\n}\n\nfunction onClick(event: Event, self: MTDSChartElement) {\n\tif (event instanceof KeyboardEvent && event.key !== \"Enter\") return; // Only handle enter key\n\tconst el = event.composedPath()[0];\n\tconst table = self.querySelector(\"table\");\n\tconst [tr, td] =\n\t\t(el instanceof Element && attr(el, \"data-event\")?.split(\"-\").map(Number)) ||\n\t\t[];\n\n\ttable?.rows[tr]?.cells[td]?.querySelector<HTMLElement>(\"a,button\")?.click?.();\n}\n\nlet TOOLTIP_TEXT = \"\";\nfunction onMoveTooltip(event: MouseEvent) {\n\tif (!TOOLTIP) return;\n\tif (!TOOLTIP?.isConnected) document.body.append(TOOLTIP); // Ensure connected\n\n\tconst el = event.composedPath()[0];\n\tconst tip = (el instanceof Element && el.getAttribute(\"aria-label\")) || \"\";\n\n\tif (tip)\n\t\tTOOLTIP.style.transform = `translate(${Math.min(event.clientX, window.innerWidth)}px, ${event.clientY}px)`;\n\tif (tip !== TOOLTIP_TEXT) {\n\t\tif (tip) TOOLTIP.textContent = tip;\n\t\tTOOLTIP_TEXT = tip;\n\t\tTOOLTIP.hidden = !tip;\n\t}\n}\n\nconst text = (el?: Element | null) => el?.textContent?.trim() || \"\"; // Helper to get trimmed text\nconst toData = (table?: HTMLTableElement | null) =>\n\tArray.from(table?.rows || []).map((row, rowIndex, { length }) =>\n\t\tArray.from(row.cells, (cell, cellIndex) => {\n\t\t\tconst rowHeading = text(row.cells[0]);\n\t\t\tconst colHeading = text(table?.rows[0].cells[cellIndex]);\n\t\t\tconst value = text(cell);\n\t\t\tconst tooltip =\n\t\t\t\tlength === 2 // If only header and one row, use simple tooltip only showing value\n\t\t\t\t\t? `${colHeading}: ${value}`\n\t\t\t\t\t: `${rowHeading}: ${value}${colHeading ? ` (${colHeading})` : \"\"}`;\n\t\t\tattr(cell, \"tabindex\", \"-1\");\n\n\t\t\treturn {\n\t\t\t\tnumber: (cellIndex && rowIndex && Number.parseFloat(value)) || 0, // First row and column is not a number\n\t\t\t\tevent: cell.querySelector(\"a,button\") && `${rowIndex}-${cellIndex}`, // Reference to proxy events\n\t\t\t\tcolor: `var(--mtdsc-chart-color-${rowIndex}-${cellIndex}, var(--mtdsc-chart-color-${rowIndex}, var(--mtdsc-chart-color-base)))`,\n\t\t\t\tvalue,\n\t\t\t\ttooltip: attr(cell, \"data-tooltip\") || tooltip,\n\t\t\t};\n\t\t}),\n\t);\n\ndefineElement(\"mtds-chart\", MTDSChartElement);\n"],"names":["EVENTS","TOOLTIP_ID","TOOLTIP","isBrowser","tag","styles","MTDSChartElement","MTDSElement","#unmutate","#unresize","render","debounce","resize","onMutation","on","off","data","toData","el","variant","type","attr","aspect","legend","value","color","axis","groups","total","toAxis","toBars","toLines","toPies","attachStyle","css","onClick","steps","event","self","table","tr","td","TOOLTIP_TEXT","onMoveTooltip","tip","text","row","rowIndex","length","cell","cellIndex","rowHeading","colHeading","tooltip","defineElement"],"mappings":"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"}
|
|
@@ -1,42 +1,37 @@
|
|
|
1
|
-
import { tag as m, attr as
|
|
2
|
-
function E(
|
|
3
|
-
const s = Number.parseFloat(n || "0") || 0,
|
|
4
|
-
return
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}), h = C(
|
|
10
|
-
l.map(({ number: c }, u, { length: $ }) => [
|
|
1
|
+
import { tag as m, attr as c } from "../utils.js";
|
|
2
|
+
function E(t, { total: e, type: n, variant: o }) {
|
|
3
|
+
const s = Number.parseFloat(n || "0") || 0, a = m("div", { class: "axisGroup" });
|
|
4
|
+
return t.slice(1).forEach(([, ...p]) => {
|
|
5
|
+
const i = m("div", { class: "lineContainer", role: "list" });
|
|
6
|
+
i.style.setProperty("--color", p[0].color);
|
|
7
|
+
const h = b(
|
|
8
|
+
p.map(({ number: r }, u, { length: $ }) => [
|
|
11
9
|
100 / ($ - 1) * u,
|
|
12
|
-
100 -
|
|
10
|
+
100 - r / e * 100
|
|
13
11
|
]),
|
|
14
12
|
s / 100
|
|
15
|
-
),
|
|
16
|
-
|
|
17
|
-
const
|
|
18
|
-
if (
|
|
19
|
-
const
|
|
20
|
-
|
|
13
|
+
), d = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
14
|
+
c(d, "aria-hidden", "true"), c(d, "preserveAspectRatio", "none"), c(d, "viewBox", "0 0 100 100");
|
|
15
|
+
const l = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
16
|
+
if (c(l, "class", "line"), c(l, "d", h), c(l, "fill", "none"), c(l, "stroke", "currentColor"), o === "area") {
|
|
17
|
+
const r = l.cloneNode(!0);
|
|
18
|
+
c(r, "d", `M-100,100 L${h.slice(1)}L200,100`), c(r, "class", "lineShade"), d.append(r);
|
|
21
19
|
}
|
|
22
|
-
|
|
23
|
-
const g = m("div", { role: "listitem" })
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
), d.append(g);
|
|
34
|
-
}), d.appendChild(p).append(i), r.append(d);
|
|
35
|
-
}), r;
|
|
20
|
+
p.forEach(({ number: r, tooltip: u, event: $ }) => {
|
|
21
|
+
const g = m("div", { role: "listitem" }), v = m("div", {
|
|
22
|
+
"aria-label": u,
|
|
23
|
+
"data-event": $,
|
|
24
|
+
tabindex: "0",
|
|
25
|
+
class: "linePoint",
|
|
26
|
+
role: "img"
|
|
27
|
+
});
|
|
28
|
+
v.style.setProperty("--value", `${r}`), g.appendChild(v), i.append(g);
|
|
29
|
+
}), i.appendChild(d).append(l), a.append(i);
|
|
30
|
+
}), a;
|
|
36
31
|
}
|
|
37
|
-
const
|
|
38
|
-
const o = t
|
|
39
|
-
return `C ${
|
|
32
|
+
const b = (t, e) => t.map(([n, o], s, a) => s ? x(s, a, e) : `M${n},${o}`).join(" "), w = ([t, e], [n, o]) => [t + n, e + o], f = ([t, e], [n, o]) => [t - n, e - o], C = (t, [e, n]) => [t * e, t * n], x = (t, e, n) => {
|
|
33
|
+
const o = e[t - 1], s = e[t], [a, p] = w(o, C(n, f(s, e[t - 2] || o))), [i, h] = w(s, C(n, f(o, e[t + 1] || s)));
|
|
34
|
+
return `C ${a},${p} ${i},${h} ${s[0]},${s[1]}`;
|
|
40
35
|
};
|
|
41
36
|
export {
|
|
42
37
|
E as toLines
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart-lines.js","sources":["../../designsystem/chart/chart-lines.ts"],"sourcesContent":["import { attr, tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Config = {\n\ttotal: number;\n\ttype: string;\n\tvariant: string;\n};\n\nexport function toLines(data: ChartData, { total, type, variant }: Config) {\n\tconst smoothing = Number.parseFloat(type || \"0\") || 0;\n\tconst group = tag(\"div\", { class: \"axisGroup\" });\n\tdata.slice(1).forEach(([, ...values]) => {\n\t\tconst lineContainer = tag(\"div\", {
|
|
1
|
+
{"version":3,"file":"chart-lines.js","sources":["../../designsystem/chart/chart-lines.ts"],"sourcesContent":["import { attr, tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Config = {\n\ttotal: number;\n\ttype: string;\n\tvariant: string;\n};\n\nexport function toLines(data: ChartData, { total, type, variant }: Config) {\n\tconst smoothing = Number.parseFloat(type || \"0\") || 0;\n\tconst group = tag(\"div\", { class: \"axisGroup\" });\n\tdata.slice(1).forEach(([, ...values]) => {\n\t\tconst lineContainer = tag(\"div\", { class: `lineContainer`, role: \"list\" });\n\t\tlineContainer.style.setProperty(\"--color\", values[0].color); // Use color of first column as default for line\n\n\t\tconst pathDefintion = toPath(\n\t\t\tvalues.map(({ number }, index, { length }) => [\n\t\t\t\t(100 / (length - 1)) * index,\n\t\t\t\t100 - (number / total) * 100,\n\t\t\t]),\n\t\t\tsmoothing / 100,\n\t\t);\n\n\t\tconst line = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n\t\tattr(line, \"aria-hidden\", \"true\");\n\t\tattr(line, \"preserveAspectRatio\", \"none\");\n\t\tattr(line, \"viewBox\", \"0 0 100 100\");\n\n\t\tconst path = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n\t\tattr(path, \"class\", \"line\");\n\t\tattr(path, \"d\", pathDefintion);\n\t\tattr(path, \"fill\", \"none\");\n\t\tattr(path, \"stroke\", \"currentColor\");\n\n\t\tif (variant === \"area\") {\n\t\t\tconst lineShade = path.cloneNode(true) as SVGPathElement;\n\t\t\tattr(lineShade, \"d\", `M-100,100 L${pathDefintion.slice(1)}L200,100`);\n\t\t\tattr(lineShade, \"class\", \"lineShade\");\n\t\t\tline.append(lineShade);\n\t\t}\n\n\t\tvalues.forEach(({ number, tooltip, event }) => {\n\t\t\tconst col = tag(\"div\", { role: \"listitem\" });\n\t\t\tconst point = tag(\"div\", {\n\t\t\t\t\"aria-label\": tooltip,\n\t\t\t\t\"data-event\": event,\n\t\t\t\ttabindex: \"0\",\n\t\t\t\tclass: \"linePoint\",\n\t\t\t\trole: \"img\",\n\t\t\t});\n\n\t\t\tpoint.style.setProperty(\"--value\", `${number}`); // Use color of first column as default for point\n\t\t\tcol.appendChild(point);\n\t\t\tlineContainer.append(col);\n\t\t});\n\n\t\tlineContainer.appendChild(line).append(path);\n\t\tgroup.append(lineContainer);\n\t});\n\treturn group;\n}\n\n// Based on https://observablehq.com/@ndry/smooth-a-svg-path-with-cubic-bezier-curves\nconst toPath = (points: number[][], s: number) =>\n\tpoints.map(([x, y], i, a) => (i ? smooth(i, a, s) : `M${x},${y}`)).join(\" \");\nconst add = ([ax, ay]: number[], [bx, by]: number[]) => [ax + bx, ay + by];\nconst sub = ([ax, ay]: number[], [bx, by]: number[]) => [ax - bx, ay - by];\nconst scale = (s: number, [x, y]: number[]) => [s * x, s * y];\nconst smooth = (i: number, all: number[][], smooth: number) => {\n\tconst start = all[i - 1];\n\tconst end = all[i];\n\tconst [csX, csY] = add(start, scale(smooth, sub(end, all[i - 2] || start))); // start control point\n\tconst [ceX, ceY] = add(end, scale(smooth, sub(start, all[i + 1] || end))); // end control point\n\treturn `C ${csX},${csY} ${ceX},${ceY} ${end[0]},${end[1]}`;\n};\n"],"names":["toLines","data","total","type","variant","smoothing","group","tag","lineContainer","values","pathDefintion","toPath","number","index","length","line","attr","path","lineShade","tooltip","event","col","point","points","s","x","y","i","smooth","add","ax","ay","bx","by","sub","scale","all","start","end","csX","csY","ceX","ceY"],"mappings":"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"}
|
package/mtds/chart/chart-pies.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { attr as s } from "../utils.js";
|
|
2
|
-
function E(h, { aspect: l, variant:
|
|
3
|
-
const
|
|
4
|
-
l &&
|
|
5
|
-
let
|
|
6
|
-
const t = 50, e =
|
|
7
|
-
return h.slice(1).forEach(([, { tooltip:
|
|
2
|
+
function E(h, { aspect: l, variant: y }) {
|
|
3
|
+
const n = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
4
|
+
l && n.style.setProperty("--mtdsc-chart-aspect", l), s(n, "class", "pie"), s(n, "viewBox", "0 0 100 100");
|
|
5
|
+
let r = 0;
|
|
6
|
+
const t = 50, e = y === "doughnut" ? 25 : 0, d = h.slice(1).reduce((a, [, c]) => a + c.number, 0);
|
|
7
|
+
return h.slice(1).forEach(([, { tooltip: a, number: c, event: v, color: x }]) => {
|
|
8
8
|
if (!c) return;
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
const m = Math.min(
|
|
12
|
-
|
|
13
|
-
}),
|
|
9
|
+
const o = document.createElementNS("http://www.w3.org/2000/svg", "path"), p = r / d;
|
|
10
|
+
r += c;
|
|
11
|
+
const m = Math.min(r / d, 0.99999), u = m - p > 0.5 ? 1 : 0, w = 2 * Math.PI * (p - 0.25), g = 2 * Math.PI * (m - 0.25), i = Math.cos(w), $ = Math.sin(w), M = Math.cos(g), f = Math.sin(g), P = `M ${t + e * i} ${t + e * $} L ${t + t * i} ${t + t * $} A ${t} ${t} 0 ${u} 1 ${t + t * M} ${t + t * f} L ${t + e * M} ${t + e * f} A ${e} ${e} 0 ${u} 0 ${t + e * i} ${t + e * $}`;
|
|
12
|
+
o.style.setProperty("--color", x), s(o, "aria-label", a), s(o, "data-event", v), s(o, "d", P), s(o, "role", "img"), s(o, "tabindex", "0"), n.appendChild(o);
|
|
13
|
+
}), n;
|
|
14
14
|
}
|
|
15
15
|
export {
|
|
16
16
|
E as toPies
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart-pies.js","sources":["../../designsystem/chart/chart-pies.ts"],"sourcesContent":["import { attr } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Options = { aspect?: string; variant: string };\n\nexport function toPies(data: ChartData, { aspect, variant }: Options) {\n\tconst pie = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n\tif (aspect) pie.style.setProperty(\"--mtdsc-chart-aspect\", aspect);\n\tattr(pie, \"class\", \"pie\");\n\tattr(pie, \"viewBox\", \"0 0 100 100\");\n\n\tlet offset = 0;\n\tconst radius = 50;\n\tconst inner = variant === \"doughnut\" ? 25 : 0;\n\tconst total = data.slice(1).reduce((tot, [, td]) => tot + td.number, 0);\n\n\tdata.slice(1).forEach(([, { tooltip, number, event,
|
|
1
|
+
{"version":3,"file":"chart-pies.js","sources":["../../designsystem/chart/chart-pies.ts"],"sourcesContent":["import { attr } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Options = { aspect?: string; variant: string };\n\nexport function toPies(data: ChartData, { aspect, variant }: Options) {\n\tconst pie = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n\tif (aspect) pie.style.setProperty(\"--mtdsc-chart-aspect\", aspect);\n\tattr(pie, \"class\", \"pie\");\n\tattr(pie, \"viewBox\", \"0 0 100 100\");\n\n\tlet offset = 0;\n\tconst radius = 50;\n\tconst inner = variant === \"doughnut\" ? 25 : 0;\n\tconst total = data.slice(1).reduce((tot, [, td]) => tot + td.number, 0);\n\n\tdata.slice(1).forEach(([, { tooltip, number, event, color }]) => {\n\t\tif (!number) return; // Skip empty\n\t\tconst path = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n\t\tconst start = offset / total;\n\t\toffset += number;\n\t\tconst end = Math.min(offset / total, 0.99999); // Ensure full circle works\n\t\tconst largeArc = end - start > 0.5 ? 1 : 0;\n\t\tconst a0 = 2 * Math.PI * (start - 0.25);\n\t\tconst a1 = 2 * Math.PI * (end - 0.25);\n\t\tconst x0 = Math.cos(a0);\n\t\tconst y0 = Math.sin(a0);\n\t\tconst x1 = Math.cos(a1);\n\t\tconst y1 = Math.sin(a1);\n\t\tconst d = `M ${radius + inner * x0} ${radius + inner * y0} L ${radius + radius * x0} ${radius + radius * y0} A ${radius} ${radius} 0 ${largeArc} 1 ${radius + radius * x1} ${radius + radius * y1} L ${radius + inner * x1} ${radius + inner * y1} A ${inner} ${inner} 0 ${largeArc} 0 ${radius + inner * x0} ${radius + inner * y0}`;\n\n\t\tpath.style.setProperty(\"--color\", color);\n\t\tattr(path, \"aria-label\", tooltip);\n\t\tattr(path, \"data-event\", event);\n\t\tattr(path, \"d\", d);\n\t\tattr(path, \"role\", \"img\");\n\t\tattr(path, \"tabindex\", \"0\");\n\t\tpie.appendChild(path);\n\t});\n\treturn pie;\n}\n"],"names":["toPies","data","aspect","variant","pie","attr","offset","radius","inner","total","tot","td","tooltip","number","event","color","path","start","end","largeArc","a0","a1","x0","y0","x1","y1","d"],"mappings":";AAKO,SAASA,EAAOC,GAAiB,EAAE,QAAAC,GAAQ,SAAAC,KAAoB;AACrE,QAAMC,IAAM,SAAS,gBAAgB,8BAA8B,KAAK;AACxE,EAAIF,KAAQE,EAAI,MAAM,YAAY,wBAAwBF,CAAM,GAChEG,EAAKD,GAAK,SAAS,KAAK,GACxBC,EAAKD,GAAK,WAAW,aAAa;AAElC,MAAIE,IAAS;AACb,QAAMC,IAAS,IACTC,IAAQL,MAAY,aAAa,KAAK,GACtCM,IAAQR,EAAK,MAAM,CAAC,EAAE,OAAO,CAACS,GAAK,CAAA,EAAGC,CAAE,MAAMD,IAAMC,EAAG,QAAQ,CAAC;AAEtE,SAAAV,EAAK,MAAM,CAAC,EAAE,QAAQ,CAAC,GAAG,EAAE,SAAAW,GAAS,QAAAC,GAAQ,OAAAC,GAAO,OAAAC,EAAA,CAAO,MAAM;AAChE,QAAI,CAACF,EAAQ;AACb,UAAMG,IAAO,SAAS,gBAAgB,8BAA8B,MAAM,GACpEC,IAAQX,IAASG;AACvB,IAAAH,KAAUO;AACV,UAAMK,IAAM,KAAK,IAAIZ,IAASG,GAAO,OAAO,GACtCU,IAAWD,IAAMD,IAAQ,MAAM,IAAI,GACnCG,IAAK,IAAI,KAAK,MAAMH,IAAQ,OAC5BI,IAAK,IAAI,KAAK,MAAMH,IAAM,OAC1BI,IAAK,KAAK,IAAIF,CAAE,GAChBG,IAAK,KAAK,IAAIH,CAAE,GAChBI,IAAK,KAAK,IAAIH,CAAE,GAChBI,IAAK,KAAK,IAAIJ,CAAE,GAChBK,IAAI,KAAKnB,IAASC,IAAQc,CAAE,IAAIf,IAASC,IAAQe,CAAE,MAAMhB,IAASA,IAASe,CAAE,IAAIf,IAASA,IAASgB,CAAE,MAAMhB,CAAM,IAAIA,CAAM,MAAMY,CAAQ,MAAMZ,IAASA,IAASiB,CAAE,IAAIjB,IAASA,IAASkB,CAAE,MAAMlB,IAASC,IAAQgB,CAAE,IAAIjB,IAASC,IAAQiB,CAAE,MAAMjB,CAAK,IAAIA,CAAK,MAAMW,CAAQ,MAAMZ,IAASC,IAAQc,CAAE,IAAIf,IAASC,IAAQe,CAAE;AAEnU,IAAAP,EAAK,MAAM,YAAY,WAAWD,CAAK,GACvCV,EAAKW,GAAM,cAAcJ,CAAO,GAChCP,EAAKW,GAAM,cAAcF,CAAK,GAC9BT,EAAKW,GAAM,KAAKU,CAAC,GACjBrB,EAAKW,GAAM,QAAQ,KAAK,GACxBX,EAAKW,GAAM,YAAY,GAAG,GAC1BZ,EAAI,YAAYY,CAAI;AAAA,EACrB,CAAC,GACMZ;AACR;"}
|
|
@@ -14,6 +14,7 @@ export declare const Default: Story;
|
|
|
14
14
|
export declare const React: Story;
|
|
15
15
|
export declare const Column: Story;
|
|
16
16
|
export declare const ColumnSingleDataset: Story;
|
|
17
|
+
export declare const ColorsSingleDataset: Story;
|
|
17
18
|
export declare const ColumnStacked: Story;
|
|
18
19
|
export declare const Bar: Story;
|
|
19
20
|
export declare const BarStacked: Story;
|
package/mtds/deprecations.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DSFieldElement as p } from "@digdir/designsystemet-web";
|
|
2
2
|
import n from "./styles.module.css.js";
|
|
3
|
-
import { getByCSSModule as l, isBrowser as i, onHotReload as y, on as u,
|
|
3
|
+
import { getByCSSModule as l, isBrowser as i, onHotReload as y, on as u, QUICK_EVENT as S, onMutation as E, attr as s, debounce as D } from "./utils.js";
|
|
4
4
|
const f = /* @__PURE__ */ new WeakSet(), a = (t) => !f.has(t) && f.add(t), o = (t, e, r) => window.dsWarnings === !1 || console.warn(
|
|
5
5
|
`\x1B[1m@mattilsynet/design:\x1B[m ${t} is deprecated, please use ${e}:`,
|
|
6
6
|
r
|
|
@@ -126,9 +126,9 @@ const f = /* @__PURE__ */ new WeakSet(), a = (t) => !f.has(t) && f.add(t), o = (
|
|
|
126
126
|
y("deprecations", () => [
|
|
127
127
|
G,
|
|
128
128
|
// Return as cleanup function
|
|
129
|
-
u(document, "click", U,
|
|
129
|
+
u(document, "click", U, S),
|
|
130
130
|
u(document, "toggle", b, !0),
|
|
131
|
-
|
|
131
|
+
E(document, W, {
|
|
132
132
|
attributeFilter: [
|
|
133
133
|
"class",
|
|
134
134
|
"data-command",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { epsilon as k,
|
|
1
|
+
import { epsilon as k, estimate as S, resulterrbound as T, splitter as f, sum as K, vec as J } from "./util.js";
|
|
2
2
|
const U = (3 + 16 * k) * k, V = (2 + 12 * k) * k, W = (9 + 64 * k) * k * k, G = J(4), L = J(8), N = J(12), O = J(16), h = J(4);
|
|
3
3
|
function X(q, z, E, F, j, A, H) {
|
|
4
4
|
let p, C, m, M, t, n, e, s, r, c, o, i, u, l, a, d, w, b;
|