@designsystem-se/af 35.3.1 → 35.4.1-beta.0
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/components/digi-bar-chart.js +126 -111
- package/components/digi-chart-line.js +1 -1
- package/components/digi-code-block.js +1 -1
- package/components/digi-code-example.js +1 -1
- package/components/digi-info-card.js +1 -1
- package/components/digi-link-button.js +3 -1
- package/components/p-472bc7d3.js +129 -0
- package/custom-elements.json +6 -2
- package/dist/cjs/digi-arbetsformedlingen.cjs.js +1 -1
- package/dist/cjs/{digi-button_24.cjs.entry.js → digi-bar-chart_27.cjs.entry.js} +1611 -47
- package/dist/cjs/digi-calendar-datepicker.cjs.entry.js +2 -2
- package/dist/cjs/digi-chart-line.cjs.entry.js +1 -1
- package/dist/cjs/digi-code-block_3.cjs.entry.js +3 -3
- package/dist/cjs/digi-dialog.cjs.entry.js +2 -2
- package/dist/cjs/digi-footer.cjs.entry.js +2 -2
- package/dist/cjs/digi-form-error-list.cjs.entry.js +2 -2
- package/dist/cjs/digi-form-receipt.cjs.entry.js +2 -2
- package/dist/cjs/digi-form-select-filter.cjs.entry.js +2 -2
- package/dist/cjs/digi-info-card.cjs.entry.js +1 -1
- package/dist/cjs/digi-link-button.cjs.entry.js +2 -1
- package/dist/cjs/digi-navigation-pagination.cjs.entry.js +2 -2
- package/dist/cjs/digi-notification-alert.cjs.entry.js +2 -2
- package/dist/cjs/digi-notification-error-page.cjs.entry.js +2 -2
- package/dist/cjs/digi-tools-feedback.cjs.entry.js +2 -2
- package/dist/cjs/digi-typography-heading-jumbo.cjs.entry.js +38 -0
- package/dist/cjs/digi-typography-preamble.cjs.entry.js +20 -0
- package/dist/cjs/index-7a477838.js +10 -14
- package/dist/cjs/index.cjs.js +20 -20
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/typography-heading-jumbo-variation.enum-8677e099.js +17 -0
- package/dist/cjs/{typography-variation.enum-9f56fd50.js → typography-variation.enum-8fd8bed4.js} +6 -16
- package/dist/collection/components/_chart/bar-chart/bar-chart.css +13 -19
- package/dist/collection/components/_chart/bar-chart/bar-chart.js +125 -110
- package/dist/collection/components/_chart/chart-line/chart-line.css +19 -23
- package/dist/collection/components/_code/code-block/code-block.css +2 -2
- package/dist/collection/components/_info-card/info-card/info-card.js +5 -5
- package/dist/collection/components/_link/link-button/link-button.js +24 -1
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/index.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/p-044b32d7.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-e2330d9c.entry.js → p-1241d74a.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/{p-e54f5b28.entry.js → p-222a2b41.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-37377041.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-3ae60edc.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-431baa4e.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-0d35dc92.entry.js → p-56ca6c5c.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/{p-6559910e.entry.js → p-58f76475.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/{p-092d0e3e.entry.js → p-5a08f170.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-5aae7437.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-c04b06a2.entry.js → p-5ac3d7a9.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/{p-e0db40e9.entry.js → p-69010d14.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/{p-f1a6524e.entry.js → p-83b3f053.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-86eddf30.js +1 -0
- package/dist/digi-arbetsformedlingen/p-9f03b573.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-a884ccf8.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-01f5f243.entry.js → p-c4cf1215.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-d1886fff.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-5c7acd45.entry.js → p-e3bdf65a.entry.js} +1 -1
- package/dist/esm/digi-arbetsformedlingen.js +1 -1
- package/dist/esm/{digi-button_24.entry.js → digi-bar-chart_27.entry.js} +1608 -47
- package/dist/esm/digi-calendar-datepicker.entry.js +2 -2
- package/dist/esm/digi-chart-line.entry.js +1 -1
- package/dist/esm/digi-code-block_3.entry.js +3 -3
- package/dist/esm/digi-dialog.entry.js +2 -2
- package/dist/esm/digi-footer.entry.js +2 -2
- package/dist/esm/digi-form-error-list.entry.js +2 -2
- package/dist/esm/digi-form-receipt.entry.js +2 -2
- package/dist/esm/digi-form-select-filter.entry.js +2 -2
- package/dist/esm/digi-info-card.entry.js +1 -1
- package/dist/esm/digi-link-button.entry.js +2 -1
- package/dist/esm/digi-navigation-pagination.entry.js +2 -2
- package/dist/esm/digi-notification-alert.entry.js +2 -2
- package/dist/esm/digi-notification-error-page.entry.js +2 -2
- package/dist/esm/digi-tools-feedback.entry.js +2 -2
- package/dist/esm/digi-typography-heading-jumbo.entry.js +34 -0
- package/dist/esm/digi-typography-preamble.entry.js +16 -0
- package/dist/esm/index-148a7577.js +10 -14
- package/dist/esm/index.js +2 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/typography-heading-jumbo-variation.enum-eb737f1b.js +17 -0
- package/dist/esm/{typography-variation.enum-8ba40d15.js → typography-variation.enum-531cdf64.js} +7 -17
- package/dist/types/components/_chart/bar-chart/bar-chart.d.ts +9 -0
- package/dist/types/components/_info-card/info-card/info-card.d.ts +4 -4
- package/dist/types/components/_link/link-button/link-button.d.ts +5 -0
- package/dist/types/components.d.ts +18 -8
- package/hydrate/index.js +132 -115
- package/hydrate/index.mjs +132 -115
- package/package.json +1 -1
- package/components/p-2bc16106.js +0 -129
- package/dist/cjs/bar-chart-variation.enum-a4e866b6.js +0 -7
- package/dist/cjs/digi-bar-chart.cjs.entry.js +0 -1510
- package/dist/cjs/digi-icon-caret-down_2.cjs.entry.js +0 -53
- package/dist/cjs/digi-icon-chart_2.cjs.entry.js +0 -53
- package/dist/digi-arbetsformedlingen/p-0c271457.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-2422b0d1.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-54a797ed.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-a5c6e42e.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-b22f09f1.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-bd6e0b22.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-c1606b8a.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-d2d0856f.js +0 -1
- package/dist/digi-arbetsformedlingen/p-d8b9b535.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-dcdffb3c.js +0 -1
- package/dist/esm/bar-chart-variation.enum-97c0b47f.js +0 -7
- package/dist/esm/digi-bar-chart.entry.js +0 -1506
- package/dist/esm/digi-icon-caret-down_2.entry.js +0 -48
- package/dist/esm/digi-icon-chart_2.entry.js +0 -48
package/hydrate/index.js
CHANGED
|
@@ -14796,7 +14796,7 @@ function basis(context) {
|
|
|
14796
14796
|
return new Basis(context);
|
|
14797
14797
|
}
|
|
14798
14798
|
|
|
14799
|
-
const chartLineCss = ".sc-digi-chart-line-h{display:block;height:100%;width:100%;position:relative}.sc-digi-chart-line-h .digi-chart-line.sc-digi-chart-line{color:var(--MY-PROP);height:100%;width:100%;min-height:fit-content}.
|
|
14799
|
+
const chartLineCss = ".sc-digi-chart-line-h{display:block;height:100%;width:100%;position:relative}.sc-digi-chart-line-h .digi-chart-line.sc-digi-chart-line{color:var(--MY-PROP);height:100%;width:100%;min-height:fit-content}.chart.sc-digi-chart-line{box-sizing:content-box;width:auto}.topWrapper.sc-digi-chart-line,.chartTitle.sc-digi-chart-line .digi-typography.sc-digi-chart-line{display:flex;flex-direction:column;gap:0.75rem}.topWrapper.sc-digi-chart-line{margin-bottom:0.75rem}.chartTitle.sc-digi-chart-line{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.buttonWrapper.sc-digi-chart-line{--digi--button--padding--medium:0 0 0.75rem 0}.close.sc-digi-chart-line{--digi--icon--color:rgb(245, 245, 245);cursor:pointer;margin-top:-5px}.legend.sc-digi-chart-line{display:flex;flex-direction:row;flex-wrap:no-wrap;gap:0.5rem;margin:0.5rem 0;margin-top:1.25rem;height:2.675rem;overflow-x:auto;overflow-y:hidden;cursor:default;max-width:100%}.chip.sc-digi-chart-line{box-sizing:border-box}.legend.sc-digi-chart-line::-webkit-scrollbar,.table.sc-digi-chart-line::-webkit-scrollbar{height:10px;width:10px}.legend.sc-digi-chart-line::-webkit-scrollbar-track,.table.sc-digi-chart-line::-webkit-scrollbar-track{background:whitesmoke;border-radius:4px}.legend.sc-digi-chart-line::-webkit-scrollbar-thumb,.table.sc-digi-chart-line::-webkit-scrollbar-thumb{background-color:lightgray;border-radius:4px;border:0}.chartTooltip.sc-digi-chart-line{box-sizing:border-box;position:absolute;background-color:rgba(10, 10, 10, 0.9);color:white;padding:5px 10px;padding-right:5px;border-radius:4px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;font-size:14px;display:none}.scChartStatus.sc-digi-chart-line{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.table.sc-digi-chart-line{display:none;overflow-y:scroll;height:fit-content;border-radius:4px;padding:0.25rem;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}.tableIcon.sc-digi-chart-line{--digi--icon--color:var(--digi--global--color--neutral--grayscale--darker);width:26px;height:26px;pointer-events:none}.tableIcon.sc-digi-chart-line:hover{--digi--icon--color:var(\n --digi--global--color--neutral--grayscale--darkest-3\n )}.tooltipHead.sc-digi-chart-line{display:flex;width:100%;justify-content:space-between;margin-bottom:0.25rem;flex-direction:row}.tooltipBody.sc-digi-chart-line{display:flex;flex-direction:column;padding-right:5px;max-height:100px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgb(245, 245, 245) transparent}";
|
|
14800
14800
|
var DigiChartLineStyle0 = chartLineCss;
|
|
14801
14801
|
|
|
14802
14802
|
/**
|
|
@@ -18901,7 +18901,7 @@ class Code {
|
|
|
18901
18901
|
}; }
|
|
18902
18902
|
}
|
|
18903
18903
|
|
|
18904
|
-
const codeBlockCss = "digi-code-block{--digi--code-block--background:var(--digi--color--background--primary);--digi--code-block--border-radius:0.3rem;--digi--code-block--border:1px solid var(--digi--grayscale--900);display:block}digi-code-block .digi-code-block{border-radius:var(--digi--code-block--border-radius);border:var(--digi--code-block--border);overflow:hidden;position:relative}digi-code-block .digi-code-block pre{margin:0}digi-code-block .digi-code-block--light{}digi-code-block .digi-code-block--light code[class*=language-],digi-code-block .digi-code-block--light pre[class*=language-]{color:#545454;background:none;font-family:var(--digi--global--typography--font-family--mono);text-align:left;white-space:pre-wrap;word-spacing:normal;word-break:
|
|
18904
|
+
const codeBlockCss = "digi-code-block{--digi--code-block--background:var(--digi--color--background--primary);--digi--code-block--border-radius:0.3rem;--digi--code-block--border:1px solid var(--digi--grayscale--900);display:block}digi-code-block .digi-code-block{border-radius:var(--digi--code-block--border-radius);border:var(--digi--code-block--border);overflow:hidden;position:relative}digi-code-block .digi-code-block pre{margin:0}digi-code-block .digi-code-block--light{}digi-code-block .digi-code-block--light code[class*=language-],digi-code-block .digi-code-block--light pre[class*=language-]{color:#545454;background:none;font-family:var(--digi--global--typography--font-family--mono);text-align:left;white-space:pre-wrap;word-spacing:normal;word-break:break-word;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}digi-code-block .digi-code-block--light pre[class*=language-]{padding:1em;overflow:auto}digi-code-block .digi-code-block--light :not(pre)>code[class*=language-],digi-code-block .digi-code-block--light pre[class*=language-]{background:#fefefe}digi-code-block .digi-code-block--light :not(pre)>code[class*=language-]{padding:0.1em;white-space:normal}digi-code-block .digi-code-block--light .token.comment,digi-code-block .digi-code-block--light .token.prolog,digi-code-block .digi-code-block--light .token.doctype,digi-code-block .digi-code-block--light .token.cdata{color:#696969}digi-code-block .digi-code-block--light .token.punctuation{color:#545454}digi-code-block .digi-code-block--light .token.property,digi-code-block .digi-code-block--light .token.tag,digi-code-block .digi-code-block--light .token.constant,digi-code-block .digi-code-block--light .token.symbol,digi-code-block .digi-code-block--light .token.deleted{color:#007faa}digi-code-block .digi-code-block--light .token.boolean,digi-code-block .digi-code-block--light .token.number{color:#008000}digi-code-block .digi-code-block--light .token.selector,digi-code-block .digi-code-block--light .token.attr-name,digi-code-block .digi-code-block--light .token.string,digi-code-block .digi-code-block--light .token.char,digi-code-block .digi-code-block--light .token.builtin,digi-code-block .digi-code-block--light .token.inserted{color:#aa5d00}digi-code-block .digi-code-block--light .token.operator,digi-code-block .digi-code-block--light .token.entity,digi-code-block .digi-code-block--light .token.url,digi-code-block .digi-code-block--light .language-css .token.string,digi-code-block .digi-code-block--light .style .token.string,digi-code-block .digi-code-block--light .token.variable{color:#008000}digi-code-block .digi-code-block--light .token.atrule,digi-code-block .digi-code-block--light .token.attr-value,digi-code-block .digi-code-block--light .token.function{color:#aa5d00}digi-code-block .digi-code-block--light .token.keyword{color:#d91e18}digi-code-block .digi-code-block--light .token.regex,digi-code-block .digi-code-block--light .token.important{color:#d91e18}digi-code-block .digi-code-block--light .token.important,digi-code-block .digi-code-block--light .token.bold{font-weight:bold}digi-code-block .digi-code-block--light .token.italic{font-style:italic}digi-code-block .digi-code-block--light .token.entity{cursor:help}@media screen and (-ms-high-contrast: active){digi-code-block .digi-code-block--light code[class*=language-],digi-code-block .digi-code-block--light pre[class*=language-]{color:windowText;background:window}digi-code-block .digi-code-block--light :not(pre)>code[class*=language-],digi-code-block .digi-code-block--light pre[class*=language-]{background:window}digi-code-block .digi-code-block--light .token.important{background:highlight;color:window;font-weight:normal}digi-code-block .digi-code-block--light .token.atrule,digi-code-block .digi-code-block--light .token.attr-value,digi-code-block .digi-code-block--light .token.function,digi-code-block .digi-code-block--light .token.keyword,digi-code-block .digi-code-block--light .token.operator,digi-code-block .digi-code-block--light .token.selector{font-weight:bold}digi-code-block .digi-code-block--light .token.attr-value,digi-code-block .digi-code-block--light .token.comment,digi-code-block .digi-code-block--light .token.doctype,digi-code-block .digi-code-block--light .token.function,digi-code-block .digi-code-block--light .token.keyword,digi-code-block .digi-code-block--light .token.operator,digi-code-block .digi-code-block--light .token.property,digi-code-block .digi-code-block--light .token.string{color:highlight}digi-code-block .digi-code-block--light .token.attr-value,digi-code-block .digi-code-block--light .token.url{font-weight:normal}}digi-code-block .digi-code-block--dark{}digi-code-block .digi-code-block--dark .digi-code-block__button{--digi--button--color--text--function--default:var(--digi--color--text--secondary);--digi--button--color--text--function--hover:var(--digi--color--text--secondary);--digi--button--color--icon--function--default:var(--digi--color--text--secondary);--digi--button--color--icon--function--hover:var(--digi--color--text--secondary);--digi--button--color--text--function--focus:var(--digi--color--text--secondary);--digi--button--color--icon--function--focus:var(--digi--color--text--secondary)}digi-code-block .digi-code-block--dark code[class*=language-],digi-code-block .digi-code-block--dark pre[class*=language-]{color:#f8f8f2;background:none;font-family:var(--digi--global--typography--font-family--mono);text-align:left;white-space:pre-wrap;word-spacing:normal;word-break:break-word;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}digi-code-block .digi-code-block--dark pre[class*=language-]{padding:1em;overflow:auto}digi-code-block .digi-code-block--dark :not(pre)>code[class*=language-],digi-code-block .digi-code-block--dark pre[class*=language-]{background:#272727}digi-code-block .digi-code-block--dark :not(pre)>code[class*=language-]{padding:0.1em;white-space:normal}digi-code-block .digi-code-block--dark .token.comment,digi-code-block .digi-code-block--dark .token.prolog,digi-code-block .digi-code-block--dark .token.doctype,digi-code-block .digi-code-block--dark .token.cdata{color:#d4d0ab}digi-code-block .digi-code-block--dark .token.punctuation{color:#fefefe}digi-code-block .digi-code-block--dark .token.property,digi-code-block .digi-code-block--dark .token.tag,digi-code-block .digi-code-block--dark .token.constant,digi-code-block .digi-code-block--dark .token.symbol,digi-code-block .digi-code-block--dark .token.deleted{color:#ffa07a}digi-code-block .digi-code-block--dark .token.boolean,digi-code-block .digi-code-block--dark .token.number{color:#00e0e0}digi-code-block .digi-code-block--dark .token.selector,digi-code-block .digi-code-block--dark .token.attr-name,digi-code-block .digi-code-block--dark .token.string,digi-code-block .digi-code-block--dark .token.char,digi-code-block .digi-code-block--dark .token.builtin,digi-code-block .digi-code-block--dark .token.inserted{color:#abe338}digi-code-block .digi-code-block--dark .token.operator,digi-code-block .digi-code-block--dark .token.entity,digi-code-block .digi-code-block--dark .token.url,digi-code-block .digi-code-block--dark .language-css .token.string,digi-code-block .digi-code-block--dark .style .token.string,digi-code-block .digi-code-block--dark .token.variable{color:#00e0e0}digi-code-block .digi-code-block--dark .token.atrule,digi-code-block .digi-code-block--dark .token.attr-value,digi-code-block .digi-code-block--dark .token.function{color:#ffd700}digi-code-block .digi-code-block--dark .token.keyword{color:#00e0e0}digi-code-block .digi-code-block--dark .token.regex,digi-code-block .digi-code-block--dark .token.important{color:#ffd700}digi-code-block .digi-code-block--dark .token.important,digi-code-block .digi-code-block--dark .token.bold{font-weight:bold}digi-code-block .digi-code-block--dark .token.italic{font-style:italic}digi-code-block .digi-code-block--dark .token.entity{cursor:help}@media screen and (-ms-high-contrast: active){digi-code-block .digi-code-block--dark code[class*=language-],digi-code-block .digi-code-block--dark pre[class*=language-]{color:windowText;background:window}digi-code-block .digi-code-block--dark :not(pre)>code[class*=language-],digi-code-block .digi-code-block--dark pre[class*=language-]{background:window}digi-code-block .digi-code-block--dark .token.important{background:highlight;color:window;font-weight:normal}digi-code-block .digi-code-block--dark .token.atrule,digi-code-block .digi-code-block--dark .token.attr-value,digi-code-block .digi-code-block--dark .token.function,digi-code-block .digi-code-block--dark .token.keyword,digi-code-block .digi-code-block--dark .token.operator,digi-code-block .digi-code-block--dark .token.selector{font-weight:bold}digi-code-block .digi-code-block--dark .token.attr-value,digi-code-block .digi-code-block--dark .token.comment,digi-code-block .digi-code-block--dark .token.doctype,digi-code-block .digi-code-block--dark .token.function,digi-code-block .digi-code-block--dark .token.keyword,digi-code-block .digi-code-block--dark .token.operator,digi-code-block .digi-code-block--dark .token.property,digi-code-block .digi-code-block--dark .token.string{color:highlight}digi-code-block .digi-code-block--dark .token.attr-value,digi-code-block .digi-code-block--dark .token.url{font-weight:normal}}digi-code-block .digi-code-block__toolbar{padding-bottom:0.5rem;display:flex;justify-content:flex-end;position:absolute;bottom:0;width:100%}digi-code-block .digi-code-block__button{margin-right:var(--digi--margin--smaller)}";
|
|
18905
18905
|
var DigiCodeBlockStyle0 = codeBlockCss;
|
|
18906
18906
|
|
|
18907
18907
|
/**
|
|
@@ -30341,7 +30341,7 @@ class InfoCard {
|
|
|
30341
30341
|
};
|
|
30342
30342
|
}
|
|
30343
30343
|
render() {
|
|
30344
|
-
return (hAsync("div", { key: '
|
|
30344
|
+
return (hAsync("div", { key: 'b87aaf790c4736075233c8cf0d15e16e757e67f1', class: Object.assign({ 'digi-info-card': true }, this.cssModifiers) }, hAsync("div", { key: '4f645a39d73a782d44ce58d6027805daa07ce6b6', class: "digi-info-card__content" }, hAsync("div", { key: '3c0e7f91e3ac681c051eb24688c88fb28a1cf6bf', class: "digi-info-card__icon" }, this.hasListIcon && (hAsync("span", { key: '53ddc991ebbd95b6a2076f491187a4c8de274b58', class: "digi-info-card__icon" }, hAsync("slot", { key: '182ee887c37e7dea4a4ab98189ea08af15418944', name: "icon" })))), hAsync(this.afHeadingLevel, { key: '8a2b1fbd4cf78cc706daf2fc74157587c16e43b8', class: "digi-info-card__heading" }, this.afHeading), hAsync("digi-typography", { key: '6c0ccbf7115dd68e2f7e6e0b55daac41d9285c2d' }, hAsync("slot", { key: '34f5f0b4526721271edd8095ae78e8812142ea10' })), this.shouldRenderInternalLink && (hAsync("digi-link-internal", { key: 'c4f3442b1b6c22ecc6d0cd12f37af5f4707244b1', class: "digi-info-card__link", afHref: this.afLinkHref, onAfOnClick: (e) => this.clickLinkHandler(e), hideVisitedColor: this.hideVisitedColor }, this.afLinkText)))));
|
|
30345
30345
|
}
|
|
30346
30346
|
get hostElement() { return getElement(this); }
|
|
30347
30347
|
static get watchers() { return {
|
|
@@ -30757,6 +30757,7 @@ class LinkButton {
|
|
|
30757
30757
|
registerInstance(this, hostRef);
|
|
30758
30758
|
this.afOnClick = createEvent(this, "afOnClick", 7);
|
|
30759
30759
|
this.afHref = undefined;
|
|
30760
|
+
this.afAriaLabel = undefined;
|
|
30760
30761
|
this.afVariation = LinkButtonVariation.PRIMARY;
|
|
30761
30762
|
this.afOverrideLink = false;
|
|
30762
30763
|
this.afLinkContainer = false;
|
|
@@ -30800,7 +30801,7 @@ class LinkButton {
|
|
|
30800
30801
|
};
|
|
30801
30802
|
}
|
|
30802
30803
|
render() {
|
|
30803
|
-
return (hAsync(Host, { key: '
|
|
30804
|
+
return (hAsync(Host, { key: '75f43380c8844ae0337b29691feed99b0acba6ed', class: Object.assign({ 'digi-link-button': true }, this.cssModifiers) }, !this.afLinkContainer && (hAsync("a", { key: '384b103cdda3806ceebf6c3d0c3e2e35b1979fce', href: this.afHref, "aria-label": this.afAriaLabel, onClick: (e) => this.clickLinkHandler(e), ref: (el) => (this._link = el) }, hAsync("span", { key: '55c1523b696faef38a4b4e00f2b9d64bd52cd2f1', class: "digi-link-button__text" }, hAsync("slot", { key: 'e516eadc702eca45be24e04d5f9d0c436dd6ef9a' })), this.hasNotification && hAsync("slot", { key: '0d4fc47c6a63ef621f0e5b06a5704f78a6988835', name: "notification" }), hAsync("digi-icon-chevron-right", { key: 'b7c058a116d956771ef1f992a82cf2735c1230e4', class: "digi-link-button__icon" }))), this.afLinkContainer && (hAsync(Fragment, { key: 'f8483003f9702cb3fe573079bedda82267e710fb' }, hAsync("slot", { key: '04f83d58576061d3db853e4bb678ffd6177ba871' }), this.hasNotification && hAsync("slot", { key: 'b4629a7a5e7c491c6c1dc9704aaab949370cc801', name: "notification" })))));
|
|
30804
30805
|
}
|
|
30805
30806
|
get hostElement() { return getElement(this); }
|
|
30806
30807
|
static get style() { return DigiLinkButtonStyle0; }
|
|
@@ -30809,6 +30810,7 @@ class LinkButton {
|
|
|
30809
30810
|
"$tagName$": "digi-link-button",
|
|
30810
30811
|
"$members$": {
|
|
30811
30812
|
"afHref": [1, "af-href"],
|
|
30813
|
+
"afAriaLabel": [1, "af-aria-label"],
|
|
30812
30814
|
"afVariation": [1, "af-variation"],
|
|
30813
30815
|
"afOverrideLink": [4, "af-override-link"],
|
|
30814
30816
|
"afLinkContainer": [4, "af-link-container"],
|
|
@@ -35684,7 +35686,7 @@ class UtilResizeObserver {
|
|
|
35684
35686
|
}; }
|
|
35685
35687
|
}
|
|
35686
35688
|
|
|
35687
|
-
const barChartCss = ".sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart
|
|
35689
|
+
const barChartCss = ".sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart{margin-bottom:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{box-sizing:border-box;position:absolute;background-color:rgba(250, 250, 250, 0.98);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start;box-shadow:rgba(60, 64, 67, 0.4) 0px 1px 2px 0px, rgba(60, 64, 67, 0.2) 0px 2px 6px 2px;font-size:0.875rem;display:none}.sc-digi-bar-chart-h .close.sc-digi-bar-chart{--digi--icon--color:black;cursor:pointer;margin-top:-5px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar{height:10px;width:10px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar-track,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar-track{background:whitesmoke;border-radius:4px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar-thumb,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar-thumb{background-color:lightgray;border-radius:4px;border:0}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:scroll;height:fit-content;border-radius:4px;padding:0.25rem;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}";
|
|
35688
35690
|
var DigiBarChartStyle0 = barChartCss;
|
|
35689
35691
|
|
|
35690
35692
|
/**
|
|
@@ -35699,6 +35701,9 @@ class barChart {
|
|
|
35699
35701
|
// States
|
|
35700
35702
|
this._loading = false;
|
|
35701
35703
|
this._placeholderTicks = ['0', '1', '2', '3', '4', '5', '6', '7'];
|
|
35704
|
+
// Width of data at each tick, if we have two data series that have values att same tick, this will be 2 for example. defaults to 1;
|
|
35705
|
+
this.dataWidth = 1;
|
|
35706
|
+
this.barGap = 0;
|
|
35702
35707
|
this._dims = {};
|
|
35703
35708
|
this._margin = {
|
|
35704
35709
|
bottom: 0,
|
|
@@ -35716,6 +35721,7 @@ class barChart {
|
|
|
35716
35721
|
this.defaultDuration = 400;
|
|
35717
35722
|
// Text and formats
|
|
35718
35723
|
this.fontSize = '0.875rem';
|
|
35724
|
+
this.colorPalettes = ['--digi--color--background--brand-primary', '--digi--color--infographic--brand--primary', '--digi--color--background--sentiment--beta--primary', '--digi--color--text--interactive--visited', '--digi--color--icon--validation--error'];
|
|
35719
35725
|
// Observer for watching size changes when in line chart mode
|
|
35720
35726
|
this.barChartObserver = new ResizeObserver((entries) => {
|
|
35721
35727
|
entries.forEach(() => {
|
|
@@ -35761,12 +35767,8 @@ class barChart {
|
|
|
35761
35767
|
this._dims.width - this._margin.right - this._margin.left
|
|
35762
35768
|
]);
|
|
35763
35769
|
this._barSelection
|
|
35764
|
-
.attr('x',
|
|
35765
|
-
|
|
35766
|
-
: this._xScale(d.key))
|
|
35767
|
-
.attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
35768
|
-
? this._xScale(d.value)
|
|
35769
|
-
: this._xScale.bandwidth());
|
|
35770
|
+
.attr('x', this.xFunction)
|
|
35771
|
+
.attr('width', this.widthFunction);
|
|
35770
35772
|
this.setValueTicks();
|
|
35771
35773
|
};
|
|
35772
35774
|
// Adding click listener for tool tip text
|
|
@@ -35855,7 +35857,7 @@ class barChart {
|
|
|
35855
35857
|
this.updateBars = (fromLoading) => {
|
|
35856
35858
|
this._barChartContainer
|
|
35857
35859
|
.selectAll('.barGroup')
|
|
35858
|
-
.data(this.
|
|
35860
|
+
.data(this.mappedData)
|
|
35859
35861
|
.join((enter) => {
|
|
35860
35862
|
var _a, _b;
|
|
35861
35863
|
const tempSelection = enter
|
|
@@ -35886,17 +35888,9 @@ class barChart {
|
|
|
35886
35888
|
.transition()
|
|
35887
35889
|
.duration(this.defaultDuration)
|
|
35888
35890
|
.ease(polyInOut)
|
|
35889
|
-
.attr('width',
|
|
35890
|
-
|
|
35891
|
-
|
|
35892
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
35893
|
-
? this._yScale(d.key)
|
|
35894
|
-
: this._yScale(d.value))
|
|
35895
|
-
.attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
35896
|
-
? this._yScale.bandwidth()
|
|
35897
|
-
: this._dims.height -
|
|
35898
|
-
this._margin.bottom -
|
|
35899
|
-
this._yScale(d.value))
|
|
35891
|
+
.attr('width', this.widthFunction)
|
|
35892
|
+
.attr('y', this.yFunction)
|
|
35893
|
+
.attr('height', this.heightFunction)
|
|
35900
35894
|
.attr('fill', '#00005a');
|
|
35901
35895
|
if (!((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
|
|
35902
35896
|
return tempSelection;
|
|
@@ -35968,15 +35962,11 @@ class barChart {
|
|
|
35968
35962
|
.on('mouseenter', this.hover)
|
|
35969
35963
|
.on('mouseleave', this.hoverOut)
|
|
35970
35964
|
.on('click', this.openTooltip)
|
|
35971
|
-
.attr('x',
|
|
35972
|
-
? 2
|
|
35973
|
-
: this._xScale(d.key))
|
|
35965
|
+
.attr('x', this.xFunction)
|
|
35974
35966
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
35975
35967
|
? this._yScale(d.key)
|
|
35976
35968
|
: this._dims.height - this._margin.bottom)
|
|
35977
|
-
.attr('width',
|
|
35978
|
-
? this._xScale(d.value)
|
|
35979
|
-
: this._xScale.bandwidth())
|
|
35969
|
+
.attr('width', this.widthFunction)
|
|
35980
35970
|
.attr('height', () => this.afVariation === BarChartVariation.Horizontal
|
|
35981
35971
|
? this._yScale.bandwidth()
|
|
35982
35972
|
: 0)
|
|
@@ -35984,14 +35974,8 @@ class barChart {
|
|
|
35984
35974
|
.transition()
|
|
35985
35975
|
.duration(this.defaultDuration)
|
|
35986
35976
|
.ease(polyInOut)
|
|
35987
|
-
.attr('y',
|
|
35988
|
-
|
|
35989
|
-
: this._yScale(d.value))
|
|
35990
|
-
.attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
35991
|
-
? this._yScale.bandwidth()
|
|
35992
|
-
: this._dims.height -
|
|
35993
|
-
this._margin.bottom -
|
|
35994
|
-
this._yScale(d.value))
|
|
35977
|
+
.attr('y', this.yFunction)
|
|
35978
|
+
.attr('height', this.heightFunction)
|
|
35995
35979
|
.on('end', () => this.barChartObserver.observe(this._chartDiv)); // Reset barchartObserver
|
|
35996
35980
|
}
|
|
35997
35981
|
else {
|
|
@@ -36000,20 +35984,10 @@ class barChart {
|
|
|
36000
35984
|
.transition()
|
|
36001
35985
|
.duration(this.defaultDuration)
|
|
36002
35986
|
.ease(polyInOut)
|
|
36003
|
-
.attr('
|
|
36004
|
-
|
|
36005
|
-
|
|
36006
|
-
.attr('
|
|
36007
|
-
? 2
|
|
36008
|
-
: this._xScale(d.key))
|
|
36009
|
-
.attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36010
|
-
? this._xScale(d.value)
|
|
36011
|
-
: this._xScale.bandwidth())
|
|
36012
|
-
.attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36013
|
-
? this._yScale.bandwidth()
|
|
36014
|
-
: this._dims.height -
|
|
36015
|
-
this._margin.bottom -
|
|
36016
|
-
this._yScale(d.value))
|
|
35987
|
+
.attr('x', this.xFunction)
|
|
35988
|
+
.attr('y', this.yFunction)
|
|
35989
|
+
.attr('width', this.widthFunction)
|
|
35990
|
+
.attr('height', this.heightFunction)
|
|
36017
35991
|
.attr('fill', '#00005a');
|
|
36018
35992
|
}
|
|
36019
35993
|
return update
|
|
@@ -36104,37 +36078,67 @@ class barChart {
|
|
|
36104
36078
|
const toReturn = [];
|
|
36105
36079
|
if (this._loading) {
|
|
36106
36080
|
this._placeholderTicks.forEach((key) => {
|
|
36107
|
-
|
|
36081
|
+
const tick = { key: key, series: [] };
|
|
36082
|
+
tick.series.push({
|
|
36108
36083
|
key: key,
|
|
36084
|
+
serie: '',
|
|
36109
36085
|
value: Math.floor(Math.random() * (9 - 2 + 1) + 2),
|
|
36110
|
-
len:
|
|
36086
|
+
len: 0
|
|
36111
36087
|
});
|
|
36088
|
+
toReturn.push(tick);
|
|
36112
36089
|
});
|
|
36113
36090
|
return toReturn;
|
|
36114
36091
|
}
|
|
36115
36092
|
this._chartData.data.xValueNames.forEach((key, index) => {
|
|
36116
|
-
|
|
36117
|
-
|
|
36118
|
-
|
|
36119
|
-
|
|
36093
|
+
const tick = { key: key, series: [] };
|
|
36094
|
+
this._chartData.data.series.forEach((serie) => {
|
|
36095
|
+
if (serie.yValues[index]) {
|
|
36096
|
+
tick.series.push({
|
|
36097
|
+
key: key,
|
|
36098
|
+
serie: serie.title,
|
|
36099
|
+
value: serie.yValues[index],
|
|
36100
|
+
len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
|
|
36101
|
+
});
|
|
36102
|
+
}
|
|
36120
36103
|
});
|
|
36104
|
+
toReturn.push(tick);
|
|
36121
36105
|
});
|
|
36122
36106
|
return toReturn;
|
|
36123
36107
|
};
|
|
36124
36108
|
this.adjustBarSize = () => {
|
|
36125
|
-
this._barSelection
|
|
36126
|
-
.attr('
|
|
36127
|
-
|
|
36128
|
-
|
|
36129
|
-
.attr('
|
|
36130
|
-
|
|
36131
|
-
|
|
36132
|
-
|
|
36133
|
-
|
|
36134
|
-
: this._xScale.
|
|
36135
|
-
.
|
|
36136
|
-
|
|
36137
|
-
|
|
36109
|
+
this._barSelection.selectAll('.bar')
|
|
36110
|
+
.attr('x', this.xFunction)
|
|
36111
|
+
.attr('y', this.yFunction)
|
|
36112
|
+
.attr('width', this.widthFunction)
|
|
36113
|
+
.attr('height', this.heightFunction);
|
|
36114
|
+
};
|
|
36115
|
+
// Handling x positioning of bars
|
|
36116
|
+
this.xFunction = (d, i) => {
|
|
36117
|
+
return this.afVariation === BarChartVariation.Horizontal
|
|
36118
|
+
? (d.value > 0 ? this._xScale(0) : this._xScale(d.value))
|
|
36119
|
+
: this._xScale(d.key) + ((this._xScale.bandwidth() / this.dataWidth) * i + (this.barGap * i));
|
|
36120
|
+
};
|
|
36121
|
+
// Handling y positioning of bars
|
|
36122
|
+
this.yFunction = (d, i) => {
|
|
36123
|
+
if (!d.value)
|
|
36124
|
+
return 0;
|
|
36125
|
+
return this.afVariation === BarChartVariation.Horizontal
|
|
36126
|
+
? this._yScale(d.key) + ((this._yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
|
|
36127
|
+
: (d.value < 0 ? this._yScale(0) : this._yScale(d.value));
|
|
36128
|
+
};
|
|
36129
|
+
// Handling height for bars
|
|
36130
|
+
this.heightFunction = (d) => {
|
|
36131
|
+
if (!d.value)
|
|
36132
|
+
return 0;
|
|
36133
|
+
return this.afVariation === BarChartVariation.Horizontal
|
|
36134
|
+
? this._yScale.bandwidth() / this.dataWidth - (this.barGap)
|
|
36135
|
+
: (d.value < 0 ? this._yScale(d.value) - this._yScale(0) : this._yScale(0) - this._yScale(d.value));
|
|
36136
|
+
};
|
|
36137
|
+
// Handling width for bars
|
|
36138
|
+
this.widthFunction = (d) => {
|
|
36139
|
+
return this.afVariation === BarChartVariation.Horizontal
|
|
36140
|
+
? Math.abs(this._xScale(0) - this._xScale(d.value))
|
|
36141
|
+
: this._xScale.bandwidth() / this.dataWidth - (this.barGap);
|
|
36138
36142
|
};
|
|
36139
36143
|
// Resize table
|
|
36140
36144
|
this.resizeTable = () => {
|
|
@@ -36374,16 +36378,16 @@ class barChart {
|
|
|
36374
36378
|
select(event.target)
|
|
36375
36379
|
.transition('hover')
|
|
36376
36380
|
.duration(20)
|
|
36377
|
-
.attr('fill', event.target.tagName === 'rect'
|
|
36378
|
-
?
|
|
36379
|
-
: 'var(--digi--color--
|
|
36381
|
+
.attr('fill', (d) => event.target.tagName === 'rect'
|
|
36382
|
+
? `hsl(from ${this.colorFunction(d.serie)} h s calc(l + 10))`
|
|
36383
|
+
: 'var(--digi--color--background--interactive--hover--tertiary)');
|
|
36380
36384
|
};
|
|
36381
36385
|
// Removing highlight from bar
|
|
36382
36386
|
this.hoverOut = (event) => {
|
|
36383
36387
|
select(event.target)
|
|
36384
36388
|
.transition('hover')
|
|
36385
36389
|
.duration(this.defaultDuration)
|
|
36386
|
-
.attr('fill', event.target.tagName === 'rect' ?
|
|
36390
|
+
.attr('fill', (d) => event.target.tagName === 'rect' ? this.colorFunction(d.serie) : '#333333');
|
|
36387
36391
|
};
|
|
36388
36392
|
this.openTooltip = (...[, d]) => {
|
|
36389
36393
|
// If type is string, the user has clicked on a y-axis tick
|
|
@@ -36452,7 +36456,7 @@ class barChart {
|
|
|
36452
36456
|
if (this.afVariation == BarChartVariation.Horizontal)
|
|
36453
36457
|
this._tickWidth = this.getLargestText(this._xScale.ticks().map((tick) => tick.toLocaleString()));
|
|
36454
36458
|
this.tickSizes();
|
|
36455
|
-
this._barChartContainer.selectAll('.barGroup').data(this.
|
|
36459
|
+
this._barChartContainer.selectAll('.barGroup').data(this.mappedData);
|
|
36456
36460
|
if ((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels)
|
|
36457
36461
|
this._textSelection.remove();
|
|
36458
36462
|
this.initBarText();
|
|
@@ -36523,6 +36527,14 @@ class barChart {
|
|
|
36523
36527
|
this._chartData = data;
|
|
36524
36528
|
else
|
|
36525
36529
|
this._chartData = JSON.parse(data);
|
|
36530
|
+
this.mappedData = this.reshapeData();
|
|
36531
|
+
// checking for width of each tick
|
|
36532
|
+
this.mappedData.forEach((elem) => {
|
|
36533
|
+
if (elem.series.length > this.dataWidth)
|
|
36534
|
+
this.dataWidth = elem.series.length;
|
|
36535
|
+
});
|
|
36536
|
+
if (this.dataWidth > 1)
|
|
36537
|
+
this.barGap = 1;
|
|
36526
36538
|
}
|
|
36527
36539
|
initSvg() {
|
|
36528
36540
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
@@ -36642,7 +36654,7 @@ class barChart {
|
|
|
36642
36654
|
this._barChartContainer.selectAll('.barGroup').remove();
|
|
36643
36655
|
this._barSelection = this._barChartContainer
|
|
36644
36656
|
.selectAll('barGroup')
|
|
36645
|
-
.data(this.
|
|
36657
|
+
.data(this.mappedData)
|
|
36646
36658
|
.join('g')
|
|
36647
36659
|
.attr('class', 'barGroup')
|
|
36648
36660
|
.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'))
|
|
@@ -36653,26 +36665,17 @@ class barChart {
|
|
|
36653
36665
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36654
36666
|
? this._yScale(d.key)
|
|
36655
36667
|
: this._dims.height - this._margin.bottom)
|
|
36656
|
-
.attr('x',
|
|
36657
|
-
? 2
|
|
36658
|
-
: this._xScale(d.key))
|
|
36668
|
+
.attr('x', this.xFunction)
|
|
36659
36669
|
.attr('ry', 4)
|
|
36660
36670
|
.attr('rx', 4)
|
|
36661
|
-
.attr('width',
|
|
36662
|
-
? this._xScale(d.value)
|
|
36663
|
-
: this._xScale.bandwidth())
|
|
36671
|
+
.attr('width', this.widthFunction)
|
|
36664
36672
|
.attr('height', () => 0)
|
|
36665
|
-
//.attr('height', (d: any) => this.afVariation === BarChartVariation.Horizontal ? this._yScale.bandwidth() : (this._dims.height - this._margin.bottom) - this._yScale(d.value))
|
|
36666
36673
|
.attr('fill', 'gray')
|
|
36667
36674
|
.transition()
|
|
36668
36675
|
.duration(400)
|
|
36669
36676
|
.delay((...[, i]) => i * 150)
|
|
36670
|
-
.attr('y',
|
|
36671
|
-
|
|
36672
|
-
: this._yScale(d.value))
|
|
36673
|
-
.attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36674
|
-
? this._yScale.bandwidth()
|
|
36675
|
-
: this._dims.height - this._margin.bottom - this._yScale(d.value));
|
|
36677
|
+
.attr('y', this.yFunction)
|
|
36678
|
+
.attr('height', this.heightFunction);
|
|
36676
36679
|
this._barSelection
|
|
36677
36680
|
.transition()
|
|
36678
36681
|
.duration(400)
|
|
@@ -36762,7 +36765,7 @@ class barChart {
|
|
|
36762
36765
|
if (this.afVariation === BarChartVariation.Horizontal) {
|
|
36763
36766
|
this.setValueTicks();
|
|
36764
36767
|
// Removing first tick, because it aligns with y-axis domain
|
|
36765
|
-
this._xAxisHandle.select('.tick').select('line').remove();
|
|
36768
|
+
//this._xAxisHandle.select('.tick').select('line').remove();
|
|
36766
36769
|
}
|
|
36767
36770
|
else {
|
|
36768
36771
|
if (!empty) {
|
|
@@ -36776,39 +36779,41 @@ class barChart {
|
|
|
36776
36779
|
initBars() {
|
|
36777
36780
|
this._barSelection = this._barChartContainer
|
|
36778
36781
|
.selectAll('barGroup')
|
|
36779
|
-
.data(this.
|
|
36782
|
+
.data(this.mappedData)
|
|
36780
36783
|
.join('g')
|
|
36781
36784
|
.attr('class', 'barGroup')
|
|
36782
|
-
.attr('id', (d) =>
|
|
36783
|
-
.
|
|
36785
|
+
.attr('id', (d) => {
|
|
36786
|
+
return 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_');
|
|
36787
|
+
});
|
|
36788
|
+
this._barSelection.selectAll('.barGroup')
|
|
36789
|
+
.data((d) => {
|
|
36790
|
+
return d.series;
|
|
36791
|
+
})
|
|
36792
|
+
.join('rect')
|
|
36784
36793
|
.attr('class', 'bar')
|
|
36785
|
-
.style('cursor', 'pointer')
|
|
36786
|
-
|
|
36787
|
-
.attr('y',
|
|
36788
|
-
? this._yScale(d.key)
|
|
36789
|
-
: this._yScale(d.value))
|
|
36790
|
-
.attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36791
|
-
? 2
|
|
36792
|
-
: this._xScale(d.key))
|
|
36794
|
+
.style('cursor', 'pointer')
|
|
36795
|
+
.attr('x', this.xFunction)
|
|
36796
|
+
.attr('y', this.yFunction)
|
|
36793
36797
|
.attr('ry', 4)
|
|
36794
36798
|
.attr('rx', 4)
|
|
36795
|
-
.attr('width',
|
|
36796
|
-
|
|
36797
|
-
|
|
36798
|
-
.attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36799
|
-
? this._yScale.bandwidth()
|
|
36800
|
-
: this._dims.height - this._margin.bottom - this._yScale(d.value))
|
|
36801
|
-
.attr('fill', '#00005a')
|
|
36799
|
+
.attr('width', this.widthFunction)
|
|
36800
|
+
.attr('height', this.heightFunction)
|
|
36801
|
+
.attr('fill', (d) => this.colorFunction(d.serie))
|
|
36802
36802
|
.on('mouseenter', this.hover)
|
|
36803
36803
|
.on('mouseleave', this.hoverOut)
|
|
36804
36804
|
.on('click', this.openTooltip);
|
|
36805
36805
|
}
|
|
36806
36806
|
initBarText() {
|
|
36807
|
+
var _a, _b;
|
|
36808
|
+
if (!((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
|
|
36809
|
+
return;
|
|
36807
36810
|
this._textSelection = this._barChartContainer
|
|
36808
36811
|
.selectAll('.barGroup')
|
|
36809
36812
|
.append('text');
|
|
36810
36813
|
this._textSelection
|
|
36811
|
-
.text((d) =>
|
|
36814
|
+
.text((d) => {
|
|
36815
|
+
return d.value ? d.value.toLocaleString(undefined, this._numberFormat) : undefined;
|
|
36816
|
+
})
|
|
36812
36817
|
.attr('class', 'barText')
|
|
36813
36818
|
.attr('font-size', this.fontSize)
|
|
36814
36819
|
.attr('font-weight', '600')
|
|
@@ -36946,6 +36951,18 @@ class barChart {
|
|
|
36946
36951
|
}
|
|
36947
36952
|
}
|
|
36948
36953
|
}
|
|
36954
|
+
// Getting correct color given index or name of data serie
|
|
36955
|
+
colorFunction(input) {
|
|
36956
|
+
if (typeof input === 'number')
|
|
36957
|
+
return `var(${this.colorPalettes[input]})`;
|
|
36958
|
+
else {
|
|
36959
|
+
const index = this._chartData.data.series.findIndex((serie) => serie.title === input);
|
|
36960
|
+
if (index > 0)
|
|
36961
|
+
return `var(${this.colorPalettes[index]})`;
|
|
36962
|
+
else
|
|
36963
|
+
return `var(${this.colorPalettes[0]})`;
|
|
36964
|
+
}
|
|
36965
|
+
}
|
|
36949
36966
|
// Resizing bar chart
|
|
36950
36967
|
resize() {
|
|
36951
36968
|
var _a;
|
|
@@ -37026,11 +37043,11 @@ class barChart {
|
|
|
37026
37043
|
}
|
|
37027
37044
|
// Not currently used
|
|
37028
37045
|
/*get cssModifiers() {
|
|
37029
|
-
|
|
37030
|
-
|
|
37031
|
-
|
|
37032
|
-
|
|
37033
|
-
|
|
37046
|
+
return {
|
|
37047
|
+
'digi-bar-chart--vertical': this.afVariation == 'vertical',
|
|
37048
|
+
'digi-bar-chart--horizontal': this.afVariation == 'horizontal'
|
|
37049
|
+
};
|
|
37050
|
+
}*/
|
|
37034
37051
|
// Returns pixelwidth of text given the current fontSize (costly function using .each)
|
|
37035
37052
|
getTextSize(text) {
|
|
37036
37053
|
const textWidth = [];
|
|
@@ -37100,7 +37117,7 @@ class barChart {
|
|
|
37100
37117
|
<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this._chartData.infoText}</span></p>`;
|
|
37101
37118
|
}
|
|
37102
37119
|
}
|
|
37103
|
-
return (hAsync(Host, { key: '
|
|
37120
|
+
return (hAsync(Host, { key: 'a1e4aaa788766d54c691e95b7e70932b0e7d2b05', ref: (el) => (this._host = el) }, hAsync("div", { key: '2fac926d196acaa20ab5f438968e3c98c08dd104', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, hAsync("digi-typography", { key: '16d8cbd0f03a2a2d24d3366ab1b3eaed797dd361', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: '22a93add4a7f1ea3965ce496f2b5cbf488b01314', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this._chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, hAsync("digi-icon-table", { key: '152938d206dc00e2fb88b52d332960cbeda2c045', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: '66db213ee1c4cb169c7c257853a15a468bf2a83e', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this._chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this._chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, hAsync("digi-icon-chart", { key: 'ac4b8adad6ace97f50591cd39b8b0082d067f069', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'b28e00a40b5c1a2919146ec4815f23a14fdfac50', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), hAsync("div", { key: '63f80744faa1d4b3d7d62bece3b5c446eda3ae7b', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '8c9fa9388b9bfc071c4a594275159eb36a8ec43b', class: "tooltipBody" }), hAsync("digi-icon-x", { key: '252d12a937e5276381fa40ec3bb4e77c259da9c1', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", null)) : (hAsync("digi-icon-caret-down", null))), hAsync("div", { key: '9b70433c310882bd0a06784ca1fa21c5b2dd9e52', ref: (el) => (this._chartDiv = el) }, " "), hAsync("div", { key: '459e38448e29eea1fa7a10de7f3f1f06b6404eab', class: "legend", ref: (el) => (this._legendDiv = el) }), hAsync("div", { key: 'cc655054cb3c3688c75060ebbdf6c3f8ea4ad712', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
|
|
37104
37121
|
}
|
|
37105
37122
|
get hostElement() { return getElement(this); }
|
|
37106
37123
|
static get watchers() { return {
|