@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.mjs
CHANGED
|
@@ -14792,7 +14792,7 @@ function basis(context) {
|
|
|
14792
14792
|
return new Basis(context);
|
|
14793
14793
|
}
|
|
14794
14794
|
|
|
14795
|
-
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}.
|
|
14795
|
+
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}";
|
|
14796
14796
|
var DigiChartLineStyle0 = chartLineCss;
|
|
14797
14797
|
|
|
14798
14798
|
/**
|
|
@@ -18897,7 +18897,7 @@ class Code {
|
|
|
18897
18897
|
}; }
|
|
18898
18898
|
}
|
|
18899
18899
|
|
|
18900
|
-
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:
|
|
18900
|
+
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)}";
|
|
18901
18901
|
var DigiCodeBlockStyle0 = codeBlockCss;
|
|
18902
18902
|
|
|
18903
18903
|
/**
|
|
@@ -30337,7 +30337,7 @@ class InfoCard {
|
|
|
30337
30337
|
};
|
|
30338
30338
|
}
|
|
30339
30339
|
render() {
|
|
30340
|
-
return (hAsync("div", { key: '
|
|
30340
|
+
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)))));
|
|
30341
30341
|
}
|
|
30342
30342
|
get hostElement() { return getElement(this); }
|
|
30343
30343
|
static get watchers() { return {
|
|
@@ -30753,6 +30753,7 @@ class LinkButton {
|
|
|
30753
30753
|
registerInstance(this, hostRef);
|
|
30754
30754
|
this.afOnClick = createEvent(this, "afOnClick", 7);
|
|
30755
30755
|
this.afHref = undefined;
|
|
30756
|
+
this.afAriaLabel = undefined;
|
|
30756
30757
|
this.afVariation = LinkButtonVariation.PRIMARY;
|
|
30757
30758
|
this.afOverrideLink = false;
|
|
30758
30759
|
this.afLinkContainer = false;
|
|
@@ -30796,7 +30797,7 @@ class LinkButton {
|
|
|
30796
30797
|
};
|
|
30797
30798
|
}
|
|
30798
30799
|
render() {
|
|
30799
|
-
return (hAsync(Host, { key: '
|
|
30800
|
+
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" })))));
|
|
30800
30801
|
}
|
|
30801
30802
|
get hostElement() { return getElement(this); }
|
|
30802
30803
|
static get style() { return DigiLinkButtonStyle0; }
|
|
@@ -30805,6 +30806,7 @@ class LinkButton {
|
|
|
30805
30806
|
"$tagName$": "digi-link-button",
|
|
30806
30807
|
"$members$": {
|
|
30807
30808
|
"afHref": [1, "af-href"],
|
|
30809
|
+
"afAriaLabel": [1, "af-aria-label"],
|
|
30808
30810
|
"afVariation": [1, "af-variation"],
|
|
30809
30811
|
"afOverrideLink": [4, "af-override-link"],
|
|
30810
30812
|
"afLinkContainer": [4, "af-link-container"],
|
|
@@ -35680,7 +35682,7 @@ class UtilResizeObserver {
|
|
|
35680
35682
|
}; }
|
|
35681
35683
|
}
|
|
35682
35684
|
|
|
35683
|
-
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
|
|
35685
|
+
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}";
|
|
35684
35686
|
var DigiBarChartStyle0 = barChartCss;
|
|
35685
35687
|
|
|
35686
35688
|
/**
|
|
@@ -35695,6 +35697,9 @@ class barChart {
|
|
|
35695
35697
|
// States
|
|
35696
35698
|
this._loading = false;
|
|
35697
35699
|
this._placeholderTicks = ['0', '1', '2', '3', '4', '5', '6', '7'];
|
|
35700
|
+
// 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;
|
|
35701
|
+
this.dataWidth = 1;
|
|
35702
|
+
this.barGap = 0;
|
|
35698
35703
|
this._dims = {};
|
|
35699
35704
|
this._margin = {
|
|
35700
35705
|
bottom: 0,
|
|
@@ -35712,6 +35717,7 @@ class barChart {
|
|
|
35712
35717
|
this.defaultDuration = 400;
|
|
35713
35718
|
// Text and formats
|
|
35714
35719
|
this.fontSize = '0.875rem';
|
|
35720
|
+
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'];
|
|
35715
35721
|
// Observer for watching size changes when in line chart mode
|
|
35716
35722
|
this.barChartObserver = new ResizeObserver((entries) => {
|
|
35717
35723
|
entries.forEach(() => {
|
|
@@ -35757,12 +35763,8 @@ class barChart {
|
|
|
35757
35763
|
this._dims.width - this._margin.right - this._margin.left
|
|
35758
35764
|
]);
|
|
35759
35765
|
this._barSelection
|
|
35760
|
-
.attr('x',
|
|
35761
|
-
|
|
35762
|
-
: this._xScale(d.key))
|
|
35763
|
-
.attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
35764
|
-
? this._xScale(d.value)
|
|
35765
|
-
: this._xScale.bandwidth());
|
|
35766
|
+
.attr('x', this.xFunction)
|
|
35767
|
+
.attr('width', this.widthFunction);
|
|
35766
35768
|
this.setValueTicks();
|
|
35767
35769
|
};
|
|
35768
35770
|
// Adding click listener for tool tip text
|
|
@@ -35851,7 +35853,7 @@ class barChart {
|
|
|
35851
35853
|
this.updateBars = (fromLoading) => {
|
|
35852
35854
|
this._barChartContainer
|
|
35853
35855
|
.selectAll('.barGroup')
|
|
35854
|
-
.data(this.
|
|
35856
|
+
.data(this.mappedData)
|
|
35855
35857
|
.join((enter) => {
|
|
35856
35858
|
var _a, _b;
|
|
35857
35859
|
const tempSelection = enter
|
|
@@ -35882,17 +35884,9 @@ class barChart {
|
|
|
35882
35884
|
.transition()
|
|
35883
35885
|
.duration(this.defaultDuration)
|
|
35884
35886
|
.ease(polyInOut)
|
|
35885
|
-
.attr('width',
|
|
35886
|
-
|
|
35887
|
-
|
|
35888
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
35889
|
-
? this._yScale(d.key)
|
|
35890
|
-
: this._yScale(d.value))
|
|
35891
|
-
.attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
35892
|
-
? this._yScale.bandwidth()
|
|
35893
|
-
: this._dims.height -
|
|
35894
|
-
this._margin.bottom -
|
|
35895
|
-
this._yScale(d.value))
|
|
35887
|
+
.attr('width', this.widthFunction)
|
|
35888
|
+
.attr('y', this.yFunction)
|
|
35889
|
+
.attr('height', this.heightFunction)
|
|
35896
35890
|
.attr('fill', '#00005a');
|
|
35897
35891
|
if (!((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
|
|
35898
35892
|
return tempSelection;
|
|
@@ -35964,15 +35958,11 @@ class barChart {
|
|
|
35964
35958
|
.on('mouseenter', this.hover)
|
|
35965
35959
|
.on('mouseleave', this.hoverOut)
|
|
35966
35960
|
.on('click', this.openTooltip)
|
|
35967
|
-
.attr('x',
|
|
35968
|
-
? 2
|
|
35969
|
-
: this._xScale(d.key))
|
|
35961
|
+
.attr('x', this.xFunction)
|
|
35970
35962
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
35971
35963
|
? this._yScale(d.key)
|
|
35972
35964
|
: this._dims.height - this._margin.bottom)
|
|
35973
|
-
.attr('width',
|
|
35974
|
-
? this._xScale(d.value)
|
|
35975
|
-
: this._xScale.bandwidth())
|
|
35965
|
+
.attr('width', this.widthFunction)
|
|
35976
35966
|
.attr('height', () => this.afVariation === BarChartVariation.Horizontal
|
|
35977
35967
|
? this._yScale.bandwidth()
|
|
35978
35968
|
: 0)
|
|
@@ -35980,14 +35970,8 @@ class barChart {
|
|
|
35980
35970
|
.transition()
|
|
35981
35971
|
.duration(this.defaultDuration)
|
|
35982
35972
|
.ease(polyInOut)
|
|
35983
|
-
.attr('y',
|
|
35984
|
-
|
|
35985
|
-
: this._yScale(d.value))
|
|
35986
|
-
.attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
35987
|
-
? this._yScale.bandwidth()
|
|
35988
|
-
: this._dims.height -
|
|
35989
|
-
this._margin.bottom -
|
|
35990
|
-
this._yScale(d.value))
|
|
35973
|
+
.attr('y', this.yFunction)
|
|
35974
|
+
.attr('height', this.heightFunction)
|
|
35991
35975
|
.on('end', () => this.barChartObserver.observe(this._chartDiv)); // Reset barchartObserver
|
|
35992
35976
|
}
|
|
35993
35977
|
else {
|
|
@@ -35996,20 +35980,10 @@ class barChart {
|
|
|
35996
35980
|
.transition()
|
|
35997
35981
|
.duration(this.defaultDuration)
|
|
35998
35982
|
.ease(polyInOut)
|
|
35999
|
-
.attr('
|
|
36000
|
-
|
|
36001
|
-
|
|
36002
|
-
.attr('
|
|
36003
|
-
? 2
|
|
36004
|
-
: this._xScale(d.key))
|
|
36005
|
-
.attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36006
|
-
? this._xScale(d.value)
|
|
36007
|
-
: this._xScale.bandwidth())
|
|
36008
|
-
.attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36009
|
-
? this._yScale.bandwidth()
|
|
36010
|
-
: this._dims.height -
|
|
36011
|
-
this._margin.bottom -
|
|
36012
|
-
this._yScale(d.value))
|
|
35983
|
+
.attr('x', this.xFunction)
|
|
35984
|
+
.attr('y', this.yFunction)
|
|
35985
|
+
.attr('width', this.widthFunction)
|
|
35986
|
+
.attr('height', this.heightFunction)
|
|
36013
35987
|
.attr('fill', '#00005a');
|
|
36014
35988
|
}
|
|
36015
35989
|
return update
|
|
@@ -36100,37 +36074,67 @@ class barChart {
|
|
|
36100
36074
|
const toReturn = [];
|
|
36101
36075
|
if (this._loading) {
|
|
36102
36076
|
this._placeholderTicks.forEach((key) => {
|
|
36103
|
-
|
|
36077
|
+
const tick = { key: key, series: [] };
|
|
36078
|
+
tick.series.push({
|
|
36104
36079
|
key: key,
|
|
36080
|
+
serie: '',
|
|
36105
36081
|
value: Math.floor(Math.random() * (9 - 2 + 1) + 2),
|
|
36106
|
-
len:
|
|
36082
|
+
len: 0
|
|
36107
36083
|
});
|
|
36084
|
+
toReturn.push(tick);
|
|
36108
36085
|
});
|
|
36109
36086
|
return toReturn;
|
|
36110
36087
|
}
|
|
36111
36088
|
this._chartData.data.xValueNames.forEach((key, index) => {
|
|
36112
|
-
|
|
36113
|
-
|
|
36114
|
-
|
|
36115
|
-
|
|
36089
|
+
const tick = { key: key, series: [] };
|
|
36090
|
+
this._chartData.data.series.forEach((serie) => {
|
|
36091
|
+
if (serie.yValues[index]) {
|
|
36092
|
+
tick.series.push({
|
|
36093
|
+
key: key,
|
|
36094
|
+
serie: serie.title,
|
|
36095
|
+
value: serie.yValues[index],
|
|
36096
|
+
len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
|
|
36097
|
+
});
|
|
36098
|
+
}
|
|
36116
36099
|
});
|
|
36100
|
+
toReturn.push(tick);
|
|
36117
36101
|
});
|
|
36118
36102
|
return toReturn;
|
|
36119
36103
|
};
|
|
36120
36104
|
this.adjustBarSize = () => {
|
|
36121
|
-
this._barSelection
|
|
36122
|
-
.attr('
|
|
36123
|
-
|
|
36124
|
-
|
|
36125
|
-
.attr('
|
|
36126
|
-
|
|
36127
|
-
|
|
36128
|
-
|
|
36129
|
-
|
|
36130
|
-
: this._xScale.
|
|
36131
|
-
.
|
|
36132
|
-
|
|
36133
|
-
|
|
36105
|
+
this._barSelection.selectAll('.bar')
|
|
36106
|
+
.attr('x', this.xFunction)
|
|
36107
|
+
.attr('y', this.yFunction)
|
|
36108
|
+
.attr('width', this.widthFunction)
|
|
36109
|
+
.attr('height', this.heightFunction);
|
|
36110
|
+
};
|
|
36111
|
+
// Handling x positioning of bars
|
|
36112
|
+
this.xFunction = (d, i) => {
|
|
36113
|
+
return this.afVariation === BarChartVariation.Horizontal
|
|
36114
|
+
? (d.value > 0 ? this._xScale(0) : this._xScale(d.value))
|
|
36115
|
+
: this._xScale(d.key) + ((this._xScale.bandwidth() / this.dataWidth) * i + (this.barGap * i));
|
|
36116
|
+
};
|
|
36117
|
+
// Handling y positioning of bars
|
|
36118
|
+
this.yFunction = (d, i) => {
|
|
36119
|
+
if (!d.value)
|
|
36120
|
+
return 0;
|
|
36121
|
+
return this.afVariation === BarChartVariation.Horizontal
|
|
36122
|
+
? this._yScale(d.key) + ((this._yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
|
|
36123
|
+
: (d.value < 0 ? this._yScale(0) : this._yScale(d.value));
|
|
36124
|
+
};
|
|
36125
|
+
// Handling height for bars
|
|
36126
|
+
this.heightFunction = (d) => {
|
|
36127
|
+
if (!d.value)
|
|
36128
|
+
return 0;
|
|
36129
|
+
return this.afVariation === BarChartVariation.Horizontal
|
|
36130
|
+
? this._yScale.bandwidth() / this.dataWidth - (this.barGap)
|
|
36131
|
+
: (d.value < 0 ? this._yScale(d.value) - this._yScale(0) : this._yScale(0) - this._yScale(d.value));
|
|
36132
|
+
};
|
|
36133
|
+
// Handling width for bars
|
|
36134
|
+
this.widthFunction = (d) => {
|
|
36135
|
+
return this.afVariation === BarChartVariation.Horizontal
|
|
36136
|
+
? Math.abs(this._xScale(0) - this._xScale(d.value))
|
|
36137
|
+
: this._xScale.bandwidth() / this.dataWidth - (this.barGap);
|
|
36134
36138
|
};
|
|
36135
36139
|
// Resize table
|
|
36136
36140
|
this.resizeTable = () => {
|
|
@@ -36370,16 +36374,16 @@ class barChart {
|
|
|
36370
36374
|
select(event.target)
|
|
36371
36375
|
.transition('hover')
|
|
36372
36376
|
.duration(20)
|
|
36373
|
-
.attr('fill', event.target.tagName === 'rect'
|
|
36374
|
-
?
|
|
36375
|
-
: 'var(--digi--color--
|
|
36377
|
+
.attr('fill', (d) => event.target.tagName === 'rect'
|
|
36378
|
+
? `hsl(from ${this.colorFunction(d.serie)} h s calc(l + 10))`
|
|
36379
|
+
: 'var(--digi--color--background--interactive--hover--tertiary)');
|
|
36376
36380
|
};
|
|
36377
36381
|
// Removing highlight from bar
|
|
36378
36382
|
this.hoverOut = (event) => {
|
|
36379
36383
|
select(event.target)
|
|
36380
36384
|
.transition('hover')
|
|
36381
36385
|
.duration(this.defaultDuration)
|
|
36382
|
-
.attr('fill', event.target.tagName === 'rect' ?
|
|
36386
|
+
.attr('fill', (d) => event.target.tagName === 'rect' ? this.colorFunction(d.serie) : '#333333');
|
|
36383
36387
|
};
|
|
36384
36388
|
this.openTooltip = (...[, d]) => {
|
|
36385
36389
|
// If type is string, the user has clicked on a y-axis tick
|
|
@@ -36448,7 +36452,7 @@ class barChart {
|
|
|
36448
36452
|
if (this.afVariation == BarChartVariation.Horizontal)
|
|
36449
36453
|
this._tickWidth = this.getLargestText(this._xScale.ticks().map((tick) => tick.toLocaleString()));
|
|
36450
36454
|
this.tickSizes();
|
|
36451
|
-
this._barChartContainer.selectAll('.barGroup').data(this.
|
|
36455
|
+
this._barChartContainer.selectAll('.barGroup').data(this.mappedData);
|
|
36452
36456
|
if ((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels)
|
|
36453
36457
|
this._textSelection.remove();
|
|
36454
36458
|
this.initBarText();
|
|
@@ -36519,6 +36523,14 @@ class barChart {
|
|
|
36519
36523
|
this._chartData = data;
|
|
36520
36524
|
else
|
|
36521
36525
|
this._chartData = JSON.parse(data);
|
|
36526
|
+
this.mappedData = this.reshapeData();
|
|
36527
|
+
// checking for width of each tick
|
|
36528
|
+
this.mappedData.forEach((elem) => {
|
|
36529
|
+
if (elem.series.length > this.dataWidth)
|
|
36530
|
+
this.dataWidth = elem.series.length;
|
|
36531
|
+
});
|
|
36532
|
+
if (this.dataWidth > 1)
|
|
36533
|
+
this.barGap = 1;
|
|
36522
36534
|
}
|
|
36523
36535
|
initSvg() {
|
|
36524
36536
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
@@ -36638,7 +36650,7 @@ class barChart {
|
|
|
36638
36650
|
this._barChartContainer.selectAll('.barGroup').remove();
|
|
36639
36651
|
this._barSelection = this._barChartContainer
|
|
36640
36652
|
.selectAll('barGroup')
|
|
36641
|
-
.data(this.
|
|
36653
|
+
.data(this.mappedData)
|
|
36642
36654
|
.join('g')
|
|
36643
36655
|
.attr('class', 'barGroup')
|
|
36644
36656
|
.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'))
|
|
@@ -36649,26 +36661,17 @@ class barChart {
|
|
|
36649
36661
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36650
36662
|
? this._yScale(d.key)
|
|
36651
36663
|
: this._dims.height - this._margin.bottom)
|
|
36652
|
-
.attr('x',
|
|
36653
|
-
? 2
|
|
36654
|
-
: this._xScale(d.key))
|
|
36664
|
+
.attr('x', this.xFunction)
|
|
36655
36665
|
.attr('ry', 4)
|
|
36656
36666
|
.attr('rx', 4)
|
|
36657
|
-
.attr('width',
|
|
36658
|
-
? this._xScale(d.value)
|
|
36659
|
-
: this._xScale.bandwidth())
|
|
36667
|
+
.attr('width', this.widthFunction)
|
|
36660
36668
|
.attr('height', () => 0)
|
|
36661
|
-
//.attr('height', (d: any) => this.afVariation === BarChartVariation.Horizontal ? this._yScale.bandwidth() : (this._dims.height - this._margin.bottom) - this._yScale(d.value))
|
|
36662
36669
|
.attr('fill', 'gray')
|
|
36663
36670
|
.transition()
|
|
36664
36671
|
.duration(400)
|
|
36665
36672
|
.delay((...[, i]) => i * 150)
|
|
36666
|
-
.attr('y',
|
|
36667
|
-
|
|
36668
|
-
: this._yScale(d.value))
|
|
36669
|
-
.attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36670
|
-
? this._yScale.bandwidth()
|
|
36671
|
-
: this._dims.height - this._margin.bottom - this._yScale(d.value));
|
|
36673
|
+
.attr('y', this.yFunction)
|
|
36674
|
+
.attr('height', this.heightFunction);
|
|
36672
36675
|
this._barSelection
|
|
36673
36676
|
.transition()
|
|
36674
36677
|
.duration(400)
|
|
@@ -36758,7 +36761,7 @@ class barChart {
|
|
|
36758
36761
|
if (this.afVariation === BarChartVariation.Horizontal) {
|
|
36759
36762
|
this.setValueTicks();
|
|
36760
36763
|
// Removing first tick, because it aligns with y-axis domain
|
|
36761
|
-
this._xAxisHandle.select('.tick').select('line').remove();
|
|
36764
|
+
//this._xAxisHandle.select('.tick').select('line').remove();
|
|
36762
36765
|
}
|
|
36763
36766
|
else {
|
|
36764
36767
|
if (!empty) {
|
|
@@ -36772,39 +36775,41 @@ class barChart {
|
|
|
36772
36775
|
initBars() {
|
|
36773
36776
|
this._barSelection = this._barChartContainer
|
|
36774
36777
|
.selectAll('barGroup')
|
|
36775
|
-
.data(this.
|
|
36778
|
+
.data(this.mappedData)
|
|
36776
36779
|
.join('g')
|
|
36777
36780
|
.attr('class', 'barGroup')
|
|
36778
|
-
.attr('id', (d) =>
|
|
36779
|
-
.
|
|
36781
|
+
.attr('id', (d) => {
|
|
36782
|
+
return 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_');
|
|
36783
|
+
});
|
|
36784
|
+
this._barSelection.selectAll('.barGroup')
|
|
36785
|
+
.data((d) => {
|
|
36786
|
+
return d.series;
|
|
36787
|
+
})
|
|
36788
|
+
.join('rect')
|
|
36780
36789
|
.attr('class', 'bar')
|
|
36781
|
-
.style('cursor', 'pointer')
|
|
36782
|
-
|
|
36783
|
-
.attr('y',
|
|
36784
|
-
? this._yScale(d.key)
|
|
36785
|
-
: this._yScale(d.value))
|
|
36786
|
-
.attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36787
|
-
? 2
|
|
36788
|
-
: this._xScale(d.key))
|
|
36790
|
+
.style('cursor', 'pointer')
|
|
36791
|
+
.attr('x', this.xFunction)
|
|
36792
|
+
.attr('y', this.yFunction)
|
|
36789
36793
|
.attr('ry', 4)
|
|
36790
36794
|
.attr('rx', 4)
|
|
36791
|
-
.attr('width',
|
|
36792
|
-
|
|
36793
|
-
|
|
36794
|
-
.attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36795
|
-
? this._yScale.bandwidth()
|
|
36796
|
-
: this._dims.height - this._margin.bottom - this._yScale(d.value))
|
|
36797
|
-
.attr('fill', '#00005a')
|
|
36795
|
+
.attr('width', this.widthFunction)
|
|
36796
|
+
.attr('height', this.heightFunction)
|
|
36797
|
+
.attr('fill', (d) => this.colorFunction(d.serie))
|
|
36798
36798
|
.on('mouseenter', this.hover)
|
|
36799
36799
|
.on('mouseleave', this.hoverOut)
|
|
36800
36800
|
.on('click', this.openTooltip);
|
|
36801
36801
|
}
|
|
36802
36802
|
initBarText() {
|
|
36803
|
+
var _a, _b;
|
|
36804
|
+
if (!((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
|
|
36805
|
+
return;
|
|
36803
36806
|
this._textSelection = this._barChartContainer
|
|
36804
36807
|
.selectAll('.barGroup')
|
|
36805
36808
|
.append('text');
|
|
36806
36809
|
this._textSelection
|
|
36807
|
-
.text((d) =>
|
|
36810
|
+
.text((d) => {
|
|
36811
|
+
return d.value ? d.value.toLocaleString(undefined, this._numberFormat) : undefined;
|
|
36812
|
+
})
|
|
36808
36813
|
.attr('class', 'barText')
|
|
36809
36814
|
.attr('font-size', this.fontSize)
|
|
36810
36815
|
.attr('font-weight', '600')
|
|
@@ -36942,6 +36947,18 @@ class barChart {
|
|
|
36942
36947
|
}
|
|
36943
36948
|
}
|
|
36944
36949
|
}
|
|
36950
|
+
// Getting correct color given index or name of data serie
|
|
36951
|
+
colorFunction(input) {
|
|
36952
|
+
if (typeof input === 'number')
|
|
36953
|
+
return `var(${this.colorPalettes[input]})`;
|
|
36954
|
+
else {
|
|
36955
|
+
const index = this._chartData.data.series.findIndex((serie) => serie.title === input);
|
|
36956
|
+
if (index > 0)
|
|
36957
|
+
return `var(${this.colorPalettes[index]})`;
|
|
36958
|
+
else
|
|
36959
|
+
return `var(${this.colorPalettes[0]})`;
|
|
36960
|
+
}
|
|
36961
|
+
}
|
|
36945
36962
|
// Resizing bar chart
|
|
36946
36963
|
resize() {
|
|
36947
36964
|
var _a;
|
|
@@ -37022,11 +37039,11 @@ class barChart {
|
|
|
37022
37039
|
}
|
|
37023
37040
|
// Not currently used
|
|
37024
37041
|
/*get cssModifiers() {
|
|
37025
|
-
|
|
37026
|
-
|
|
37027
|
-
|
|
37028
|
-
|
|
37029
|
-
|
|
37042
|
+
return {
|
|
37043
|
+
'digi-bar-chart--vertical': this.afVariation == 'vertical',
|
|
37044
|
+
'digi-bar-chart--horizontal': this.afVariation == 'horizontal'
|
|
37045
|
+
};
|
|
37046
|
+
}*/
|
|
37030
37047
|
// Returns pixelwidth of text given the current fontSize (costly function using .each)
|
|
37031
37048
|
getTextSize(text) {
|
|
37032
37049
|
const textWidth = [];
|
|
@@ -37096,7 +37113,7 @@ class barChart {
|
|
|
37096
37113
|
<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>`;
|
|
37097
37114
|
}
|
|
37098
37115
|
}
|
|
37099
|
-
return (hAsync(Host, { key: '
|
|
37116
|
+
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) }, ' ')));
|
|
37100
37117
|
}
|
|
37101
37118
|
get hostElement() { return getElement(this); }
|
|
37102
37119
|
static get watchers() { return {
|
package/package.json
CHANGED