@designsystem-se/af 35.4.1-beta.2 → 35.4.1-beta.4
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 +26 -14
- package/dist/cjs/digi-bar-chart_27.cjs.entry.js +26 -14
- package/dist/collection/components/_chart/bar-chart/bar-chart.css +4 -2
- package/dist/collection/components/_chart/bar-chart/bar-chart.js +25 -13
- package/dist/collection/design-tokens/components/_logo.variables.scss +19 -16
- package/dist/digi-arbetsformedlingen/design-tokens/components/_logo.variables.scss +1 -0
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/p-0030ed70.entry.js +1 -0
- package/dist/esm/digi-bar-chart_27.entry.js +26 -14
- package/hydrate/index.js +26 -14
- package/hydrate/index.mjs +26 -14
- package/package.json +1 -1
- package/dist/digi-arbetsformedlingen/p-44da2e39.entry.js +0 -1
|
@@ -91,7 +91,7 @@ function band() {
|
|
|
91
91
|
return initRange.apply(rescale(), arguments);
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
-
const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.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 .svgWrap.sc-digi-bar-chart{position:relative;display:flex;width:100%;height:100%}.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 .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{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .
|
|
94
|
+
const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.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 .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.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 .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{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart:hover{--digi--color--icon--primary:gray}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.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:auto;height:auto;border-radius:4px;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}";
|
|
95
95
|
const DigiBarChartStyle0 = barChartCss;
|
|
96
96
|
|
|
97
97
|
const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
@@ -673,7 +673,10 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
673
673
|
this.dims = select(this.chartDiv).node().getBoundingClientRect();
|
|
674
674
|
this.dims.height =
|
|
675
675
|
this.maxHeight - tempLegend.height - tempTitle.height - 1.75 * this.rem;
|
|
676
|
-
|
|
676
|
+
// Making sure height and width are defined
|
|
677
|
+
this.dims.height = Number.isNaN(this.dims.height) ? 10 : this.dims.height;
|
|
678
|
+
this.dims.width = Number.isNaN(this.dims.width) ? 10 : this.dims.width;
|
|
679
|
+
return prevHeight !== this.dims.height;
|
|
677
680
|
};
|
|
678
681
|
// Setting margins given text size
|
|
679
682
|
this.setMargins = (fromLoading) => {
|
|
@@ -1093,7 +1096,8 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1093
1096
|
this.chartData = data;
|
|
1094
1097
|
else
|
|
1095
1098
|
this.chartData = JSON.parse(data);
|
|
1096
|
-
|
|
1099
|
+
if (this.chartData)
|
|
1100
|
+
this.series = this.chartData.data.series.map(serie => serie.title);
|
|
1097
1101
|
this.mappedData = this.reshapeData();
|
|
1098
1102
|
// checking for width of each tick
|
|
1099
1103
|
this.mappedData.forEach((elem) => {
|
|
@@ -1183,29 +1187,31 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1183
1187
|
initToolTip() {
|
|
1184
1188
|
// Getting handle for tooltip
|
|
1185
1189
|
this.tooltip = select('#' + this.afId);
|
|
1186
|
-
this.tooltip.select('.
|
|
1190
|
+
this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
|
|
1187
1191
|
// Add heading placeholder for heading
|
|
1188
1192
|
this.tooltip
|
|
1189
1193
|
.select('.tooltipHead')
|
|
1190
1194
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
1191
1195
|
.attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
|
|
1192
1196
|
.style('font-size', '1rem')
|
|
1193
|
-
.style('margin', '0 0.75rem 0.
|
|
1197
|
+
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
1194
1198
|
.style('font-weight', '500');
|
|
1195
1199
|
this.tooltip.style('visibility', 'hidden');
|
|
1196
1200
|
}
|
|
1197
1201
|
initEmpty() {
|
|
1198
|
-
select(this.chartDiv).select('
|
|
1202
|
+
select(this.chartDiv).select('.chartSVG').remove();
|
|
1199
1203
|
this.maxHeight = select(this.host)
|
|
1200
1204
|
.node()
|
|
1201
1205
|
.parentNode.getBoundingClientRect().height;
|
|
1202
1206
|
this.barChartObserver.observe(this.chartDiv);
|
|
1207
|
+
this.setDims();
|
|
1203
1208
|
// Getting rem-size
|
|
1204
1209
|
this.rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
1205
1210
|
this.setMargins();
|
|
1206
1211
|
// Appending svg
|
|
1207
1212
|
this.svg = select(this.chartDiv)
|
|
1208
1213
|
.append('svg')
|
|
1214
|
+
.attr('class', 'chartSVG')
|
|
1209
1215
|
.attr('aria-hidden', true)
|
|
1210
1216
|
.attr('role', 'img')
|
|
1211
1217
|
.attr('aria-label', this.chartData && this.chartData.title
|
|
@@ -1217,10 +1223,13 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1217
1223
|
.html(`${_t.loading}...`);
|
|
1218
1224
|
this.initYAxis(true);
|
|
1219
1225
|
this.initXAxis(true);
|
|
1226
|
+
this.tooltip = select('#' + this.afId);
|
|
1227
|
+
this.tooltip.style('visibility', 'hidden');
|
|
1220
1228
|
this.loadingState(true);
|
|
1221
1229
|
}
|
|
1222
1230
|
loadingState(empty) {
|
|
1223
1231
|
this.loading = true;
|
|
1232
|
+
console.log('loading!');
|
|
1224
1233
|
// close potentially open tooltip
|
|
1225
1234
|
if (this.tooltip)
|
|
1226
1235
|
this.closeTooltip();
|
|
@@ -1266,11 +1275,13 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1266
1275
|
.data(this.mappedData)
|
|
1267
1276
|
.join('g')
|
|
1268
1277
|
.attr('class', 'barGroup')
|
|
1269
|
-
.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''))
|
|
1270
|
-
|
|
1278
|
+
.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
|
|
1279
|
+
this.barSelection.selectAll('.barGroup')
|
|
1280
|
+
.data((d) => {
|
|
1281
|
+
return d.series;
|
|
1282
|
+
})
|
|
1283
|
+
.join('rect')
|
|
1271
1284
|
.attr('class', 'bar')
|
|
1272
|
-
.style('cursor', 'pointer');
|
|
1273
|
-
this.barSelection
|
|
1274
1285
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
1275
1286
|
? this.yScale(d.key)
|
|
1276
1287
|
: this.dims.height - this.margin.bottom)
|
|
@@ -1279,13 +1290,14 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1279
1290
|
.attr('rx', 4)
|
|
1280
1291
|
.attr('width', this.widthFunction)
|
|
1281
1292
|
.attr('height', () => 0)
|
|
1282
|
-
.attr('fill', 'gray')
|
|
1283
|
-
|
|
1293
|
+
.attr('fill', 'gray');
|
|
1294
|
+
this.barChartContainer.selectAll('.bar')
|
|
1295
|
+
.transition('animateBar')
|
|
1284
1296
|
.duration(400)
|
|
1285
1297
|
.delay((...[, i]) => i * 150)
|
|
1286
1298
|
.attr('y', this.yFunction)
|
|
1287
1299
|
.attr('height', this.heightFunction);
|
|
1288
|
-
this.
|
|
1300
|
+
this.barChartContainer.selectAll('.bar')
|
|
1289
1301
|
.transition()
|
|
1290
1302
|
.duration(400)
|
|
1291
1303
|
.ease(linear$1)
|
|
@@ -1731,7 +1743,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1731
1743
|
<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>`;
|
|
1732
1744
|
}
|
|
1733
1745
|
}
|
|
1734
|
-
return (h(Host, { key: '
|
|
1746
|
+
return (h(Host, { key: '3b919d1bdd201ddf5e4e5e2955190ed34c5aced3', ref: (el) => (this.host = el) }, h("svg", { key: '380b1d30cc3c7a71bf05fa4cdf4bb00def16b090', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: 'd39cde898124df9b34b994d0105fcc28e486a8f4' }, h("pattern", { key: '20d0ffdfa0e5310cad77ec994bf963f600de7b69', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '17d98e16afa2c42146a22a441d3dd0922ae767f5', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '3dfdebb12e5f2eba8b216acd4ff846e82615ed66', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: 'df76dde74f8e49e600f97b81c0c50e97147b9626', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '1d7a87ca509e067288af063e406d98962639560c', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '1c9618f2b783704cc0ceab0c38d8b525b9fdc520', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: '5217e3c1b3063bcb77fee7bebf631296ea95ab6b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '904c16605d7947862bbf77b7f5dcbf581284ef97', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'e285bef2d76e214a5615d4cee157bde5061e472a', 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() : ''}` }, h("digi-icon-table", { key: '2b278678de6fc8feda2f02c494c6e0dc76d1b3bb', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '85aa9d581cdf8332b87eebb80df10e2e654ec81e', 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() : ''}` }, h("digi-icon-chart", { key: 'e4396b006704ebd6ffad155ebb4be3ae7abaf5d0', slot: "icon" }), "Visa diagram"), h("div", { key: '6c8a51169075d49b9da6f0158042c06e5d38a6e2', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: '8b0b7b63ba4f8b428f6d728d48cdc05ae791a605', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: 'fadf084df0bfcd6f39831b92983091e6c0fefbd0', class: "chartTooltip", id: this.afId }, h("div", { key: '3a0258527320c1719bffec8c221bc9884d77ee1f', class: "tooltipHead" }, h("digi-icon-x", { key: 'b1013c82580116f7806b2bf31b08eea205a47db1', class: "tooltipClose" })), h("div", { key: 'e98e704c7f03fe0e0c1a90a9088f2962b9661a5c', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '56da797be96540039f52ae28a2bf250d46f47f12', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '3f3621240d161083d114df5d02a550d1f06613fa', class: "legend" })), h("div", { key: '427754c0a4b58f1cb334e89960d60c4ef22284f4', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
1735
1747
|
}
|
|
1736
1748
|
get hostElement() { return this; }
|
|
1737
1749
|
static get watchers() { return {
|
|
@@ -134,7 +134,7 @@ function band() {
|
|
|
134
134
|
return linear.initRange.apply(rescale(), arguments);
|
|
135
135
|
}
|
|
136
136
|
|
|
137
|
-
const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.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 .svgWrap.sc-digi-bar-chart{position:relative;display:flex;width:100%;height:100%}.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 .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{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .
|
|
137
|
+
const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.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 .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.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 .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{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart:hover{--digi--color--icon--primary:gray}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.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:auto;height:auto;border-radius:4px;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}";
|
|
138
138
|
const DigiBarChartStyle0 = barChartCss;
|
|
139
139
|
|
|
140
140
|
const barChart = class {
|
|
@@ -715,7 +715,10 @@ const barChart = class {
|
|
|
715
715
|
this.dims = linear.select(this.chartDiv).node().getBoundingClientRect();
|
|
716
716
|
this.dims.height =
|
|
717
717
|
this.maxHeight - tempLegend.height - tempTitle.height - 1.75 * this.rem;
|
|
718
|
-
|
|
718
|
+
// Making sure height and width are defined
|
|
719
|
+
this.dims.height = Number.isNaN(this.dims.height) ? 10 : this.dims.height;
|
|
720
|
+
this.dims.width = Number.isNaN(this.dims.width) ? 10 : this.dims.width;
|
|
721
|
+
return prevHeight !== this.dims.height;
|
|
719
722
|
};
|
|
720
723
|
// Setting margins given text size
|
|
721
724
|
this.setMargins = (fromLoading) => {
|
|
@@ -1135,7 +1138,8 @@ const barChart = class {
|
|
|
1135
1138
|
this.chartData = data;
|
|
1136
1139
|
else
|
|
1137
1140
|
this.chartData = JSON.parse(data);
|
|
1138
|
-
|
|
1141
|
+
if (this.chartData)
|
|
1142
|
+
this.series = this.chartData.data.series.map(serie => serie.title);
|
|
1139
1143
|
this.mappedData = this.reshapeData();
|
|
1140
1144
|
// checking for width of each tick
|
|
1141
1145
|
this.mappedData.forEach((elem) => {
|
|
@@ -1225,29 +1229,31 @@ const barChart = class {
|
|
|
1225
1229
|
initToolTip() {
|
|
1226
1230
|
// Getting handle for tooltip
|
|
1227
1231
|
this.tooltip = linear.select('#' + this.afId);
|
|
1228
|
-
this.tooltip.select('.
|
|
1232
|
+
this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
|
|
1229
1233
|
// Add heading placeholder for heading
|
|
1230
1234
|
this.tooltip
|
|
1231
1235
|
.select('.tooltipHead')
|
|
1232
1236
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
1233
1237
|
.attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
|
|
1234
1238
|
.style('font-size', '1rem')
|
|
1235
|
-
.style('margin', '0 0.75rem 0.
|
|
1239
|
+
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
1236
1240
|
.style('font-weight', '500');
|
|
1237
1241
|
this.tooltip.style('visibility', 'hidden');
|
|
1238
1242
|
}
|
|
1239
1243
|
initEmpty() {
|
|
1240
|
-
linear.select(this.chartDiv).select('
|
|
1244
|
+
linear.select(this.chartDiv).select('.chartSVG').remove();
|
|
1241
1245
|
this.maxHeight = linear.select(this.host)
|
|
1242
1246
|
.node()
|
|
1243
1247
|
.parentNode.getBoundingClientRect().height;
|
|
1244
1248
|
this.barChartObserver.observe(this.chartDiv);
|
|
1249
|
+
this.setDims();
|
|
1245
1250
|
// Getting rem-size
|
|
1246
1251
|
this.rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
1247
1252
|
this.setMargins();
|
|
1248
1253
|
// Appending svg
|
|
1249
1254
|
this.svg = linear.select(this.chartDiv)
|
|
1250
1255
|
.append('svg')
|
|
1256
|
+
.attr('class', 'chartSVG')
|
|
1251
1257
|
.attr('aria-hidden', true)
|
|
1252
1258
|
.attr('role', 'img')
|
|
1253
1259
|
.attr('aria-label', this.chartData && this.chartData.title
|
|
@@ -1259,10 +1265,13 @@ const barChart = class {
|
|
|
1259
1265
|
.html(`${text._t.loading}...`);
|
|
1260
1266
|
this.initYAxis(true);
|
|
1261
1267
|
this.initXAxis(true);
|
|
1268
|
+
this.tooltip = linear.select('#' + this.afId);
|
|
1269
|
+
this.tooltip.style('visibility', 'hidden');
|
|
1262
1270
|
this.loadingState(true);
|
|
1263
1271
|
}
|
|
1264
1272
|
loadingState(empty) {
|
|
1265
1273
|
this.loading = true;
|
|
1274
|
+
console.log('loading!');
|
|
1266
1275
|
// close potentially open tooltip
|
|
1267
1276
|
if (this.tooltip)
|
|
1268
1277
|
this.closeTooltip();
|
|
@@ -1308,11 +1317,13 @@ const barChart = class {
|
|
|
1308
1317
|
.data(this.mappedData)
|
|
1309
1318
|
.join('g')
|
|
1310
1319
|
.attr('class', 'barGroup')
|
|
1311
|
-
.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''))
|
|
1312
|
-
|
|
1320
|
+
.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
|
|
1321
|
+
this.barSelection.selectAll('.barGroup')
|
|
1322
|
+
.data((d) => {
|
|
1323
|
+
return d.series;
|
|
1324
|
+
})
|
|
1325
|
+
.join('rect')
|
|
1313
1326
|
.attr('class', 'bar')
|
|
1314
|
-
.style('cursor', 'pointer');
|
|
1315
|
-
this.barSelection
|
|
1316
1327
|
.attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
1317
1328
|
? this.yScale(d.key)
|
|
1318
1329
|
: this.dims.height - this.margin.bottom)
|
|
@@ -1321,13 +1332,14 @@ const barChart = class {
|
|
|
1321
1332
|
.attr('rx', 4)
|
|
1322
1333
|
.attr('width', this.widthFunction)
|
|
1323
1334
|
.attr('height', () => 0)
|
|
1324
|
-
.attr('fill', 'gray')
|
|
1325
|
-
|
|
1335
|
+
.attr('fill', 'gray');
|
|
1336
|
+
this.barChartContainer.selectAll('.bar')
|
|
1337
|
+
.transition('animateBar')
|
|
1326
1338
|
.duration(400)
|
|
1327
1339
|
.delay((...[, i]) => i * 150)
|
|
1328
1340
|
.attr('y', this.yFunction)
|
|
1329
1341
|
.attr('height', this.heightFunction);
|
|
1330
|
-
this.
|
|
1342
|
+
this.barChartContainer.selectAll('.bar')
|
|
1331
1343
|
.transition()
|
|
1332
1344
|
.duration(400)
|
|
1333
1345
|
.ease(linear.linear$1)
|
|
@@ -1773,7 +1785,7 @@ const barChart = class {
|
|
|
1773
1785
|
<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>`;
|
|
1774
1786
|
}
|
|
1775
1787
|
}
|
|
1776
|
-
return (index.h(index.Host, { key: '
|
|
1788
|
+
return (index.h(index.Host, { key: '3b919d1bdd201ddf5e4e5e2955190ed34c5aced3', ref: (el) => (this.host = el) }, index.h("svg", { key: '380b1d30cc3c7a71bf05fa4cdf4bb00def16b090', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, index.h("defs", { key: 'd39cde898124df9b34b994d0105fcc28e486a8f4' }, index.h("pattern", { key: '20d0ffdfa0e5310cad77ec994bf963f600de7b69', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '17d98e16afa2c42146a22a441d3dd0922ae767f5', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), index.h("pattern", { key: '3dfdebb12e5f2eba8b216acd4ff846e82615ed66', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: 'df76dde74f8e49e600f97b81c0c50e97147b9626', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), index.h("pattern", { key: '1d7a87ca509e067288af063e406d98962639560c', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '1c9618f2b783704cc0ceab0c38d8b525b9fdc520', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), index.h("div", { key: '5217e3c1b3063bcb77fee7bebf631296ea95ab6b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, index.h("digi-typography", { key: '904c16605d7947862bbf77b7f5dcbf581284ef97', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: 'e285bef2d76e214a5615d4cee157bde5061e472a', 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() : ''}` }, index.h("digi-icon-table", { key: '2b278678de6fc8feda2f02c494c6e0dc76d1b3bb', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: '85aa9d581cdf8332b87eebb80df10e2e654ec81e', 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() : ''}` }, index.h("digi-icon-chart", { key: 'e4396b006704ebd6ffad155ebb4be3ae7abaf5d0', slot: "icon" }), "Visa diagram"), index.h("div", { key: '6c8a51169075d49b9da6f0158042c06e5d38a6e2', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), index.h("div", { key: '8b0b7b63ba4f8b428f6d728d48cdc05ae791a605', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, index.h("div", { key: 'fadf084df0bfcd6f39831b92983091e6c0fefbd0', class: "chartTooltip", id: this.afId }, index.h("div", { key: '3a0258527320c1719bffec8c221bc9884d77ee1f', class: "tooltipHead" }, index.h("digi-icon-x", { key: 'b1013c82580116f7806b2bf31b08eea205a47db1', class: "tooltipClose" })), index.h("div", { key: 'e98e704c7f03fe0e0c1a90a9088f2962b9661a5c', class: "tooltipBody" }), this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal ? (index.h("digi-icon-caret-up", { class: "caret" })) : (index.h("digi-icon-caret-down", { class: "caret" })))), index.h("div", { key: '56da797be96540039f52ae28a2bf250d46f47f12', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, index.h("div", { key: '3f3621240d161083d114df5d02a550d1f06613fa', class: "legend" })), index.h("div", { key: '427754c0a4b58f1cb334e89960d60c4ef22284f4', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
1777
1789
|
}
|
|
1778
1790
|
get hostElement() { return index.getElement(this); }
|
|
1779
1791
|
static get watchers() { return {
|
|
@@ -12,6 +12,8 @@
|
|
|
12
12
|
:host .svgWrap {
|
|
13
13
|
position: relative;
|
|
14
14
|
display: flex;
|
|
15
|
+
min-height: 20px;
|
|
16
|
+
min-width: 20px;
|
|
15
17
|
width: 100%;
|
|
16
18
|
height: 100%;
|
|
17
19
|
}
|
|
@@ -53,13 +55,13 @@
|
|
|
53
55
|
flex-direction: row;
|
|
54
56
|
justify-content: space-between;
|
|
55
57
|
}
|
|
56
|
-
:host .
|
|
58
|
+
:host .tooltipClose {
|
|
57
59
|
display: inline-block;
|
|
58
60
|
vertical-align: top;
|
|
59
61
|
--digi--color--icon--primary: #333;
|
|
60
62
|
cursor: pointer;
|
|
61
63
|
}
|
|
62
|
-
:host .
|
|
64
|
+
:host .tooltipClose:hover {
|
|
63
65
|
--digi--color--icon--primary: gray;
|
|
64
66
|
}
|
|
65
67
|
:host .legendWrap {
|
|
@@ -591,7 +591,10 @@ export class barChart {
|
|
|
591
591
|
this.dims = d3.select(this.chartDiv).node().getBoundingClientRect();
|
|
592
592
|
this.dims.height =
|
|
593
593
|
this.maxHeight - tempLegend.height - tempTitle.height - 1.75 * this.rem;
|
|
594
|
-
|
|
594
|
+
// Making sure height and width are defined
|
|
595
|
+
this.dims.height = Number.isNaN(this.dims.height) ? 10 : this.dims.height;
|
|
596
|
+
this.dims.width = Number.isNaN(this.dims.width) ? 10 : this.dims.width;
|
|
597
|
+
return prevHeight !== this.dims.height;
|
|
595
598
|
};
|
|
596
599
|
// Setting margins given text size
|
|
597
600
|
this.setMargins = (fromLoading) => {
|
|
@@ -1011,7 +1014,8 @@ export class barChart {
|
|
|
1011
1014
|
this.chartData = data;
|
|
1012
1015
|
else
|
|
1013
1016
|
this.chartData = JSON.parse(data);
|
|
1014
|
-
|
|
1017
|
+
if (this.chartData)
|
|
1018
|
+
this.series = this.chartData.data.series.map(serie => serie.title);
|
|
1015
1019
|
this.mappedData = this.reshapeData();
|
|
1016
1020
|
// checking for width of each tick
|
|
1017
1021
|
this.mappedData.forEach((elem) => {
|
|
@@ -1103,24 +1107,25 @@ export class barChart {
|
|
|
1103
1107
|
initToolTip() {
|
|
1104
1108
|
// Getting handle for tooltip
|
|
1105
1109
|
this.tooltip = d3.select('#' + this.afId);
|
|
1106
|
-
this.tooltip.select('.
|
|
1110
|
+
this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
|
|
1107
1111
|
// Add heading placeholder for heading
|
|
1108
1112
|
this.tooltip
|
|
1109
1113
|
.select('.tooltipHead')
|
|
1110
1114
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
1111
1115
|
.attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
|
|
1112
1116
|
.style('font-size', '1rem')
|
|
1113
|
-
.style('margin', '0 0.75rem 0.
|
|
1117
|
+
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
1114
1118
|
.style('font-weight', '500');
|
|
1115
1119
|
this.tooltip.style('visibility', 'hidden');
|
|
1116
1120
|
}
|
|
1117
1121
|
initEmpty() {
|
|
1118
|
-
d3.select(this.chartDiv).select('
|
|
1122
|
+
d3.select(this.chartDiv).select('.chartSVG').remove();
|
|
1119
1123
|
this.maxHeight = d3
|
|
1120
1124
|
.select(this.host)
|
|
1121
1125
|
.node()
|
|
1122
1126
|
.parentNode.getBoundingClientRect().height;
|
|
1123
1127
|
this.barChartObserver.observe(this.chartDiv);
|
|
1128
|
+
this.setDims();
|
|
1124
1129
|
// Getting rem-size
|
|
1125
1130
|
this.rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
1126
1131
|
this.setMargins();
|
|
@@ -1128,6 +1133,7 @@ export class barChart {
|
|
|
1128
1133
|
this.svg = d3
|
|
1129
1134
|
.select(this.chartDiv)
|
|
1130
1135
|
.append('svg')
|
|
1136
|
+
.attr('class', 'chartSVG')
|
|
1131
1137
|
.attr('aria-hidden', true)
|
|
1132
1138
|
.attr('role', 'img')
|
|
1133
1139
|
.attr('aria-label', this.chartData && this.chartData.title
|
|
@@ -1139,10 +1145,13 @@ export class barChart {
|
|
|
1139
1145
|
.html(`${_t.loading}...`);
|
|
1140
1146
|
this.initYAxis(true);
|
|
1141
1147
|
this.initXAxis(true);
|
|
1148
|
+
this.tooltip = d3.select('#' + this.afId);
|
|
1149
|
+
this.tooltip.style('visibility', 'hidden');
|
|
1142
1150
|
this.loadingState(true);
|
|
1143
1151
|
}
|
|
1144
1152
|
loadingState(empty) {
|
|
1145
1153
|
this.loading = true;
|
|
1154
|
+
console.log('loading!');
|
|
1146
1155
|
// close potentially open tooltip
|
|
1147
1156
|
if (this.tooltip)
|
|
1148
1157
|
this.closeTooltip();
|
|
@@ -1188,11 +1197,13 @@ export class barChart {
|
|
|
1188
1197
|
.data(this.mappedData)
|
|
1189
1198
|
.join('g')
|
|
1190
1199
|
.attr('class', 'barGroup')
|
|
1191
|
-
.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''))
|
|
1192
|
-
|
|
1200
|
+
.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
|
|
1201
|
+
this.barSelection.selectAll('.barGroup')
|
|
1202
|
+
.data((d) => {
|
|
1203
|
+
return d.series;
|
|
1204
|
+
})
|
|
1205
|
+
.join('rect')
|
|
1193
1206
|
.attr('class', 'bar')
|
|
1194
|
-
.style('cursor', 'pointer');
|
|
1195
|
-
this.barSelection
|
|
1196
1207
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
1197
1208
|
? this.yScale(d.key)
|
|
1198
1209
|
: this.dims.height - this.margin.bottom)
|
|
@@ -1201,13 +1212,14 @@ export class barChart {
|
|
|
1201
1212
|
.attr('rx', 4)
|
|
1202
1213
|
.attr('width', this.widthFunction)
|
|
1203
1214
|
.attr('height', () => 0)
|
|
1204
|
-
.attr('fill', 'gray')
|
|
1205
|
-
|
|
1215
|
+
.attr('fill', 'gray');
|
|
1216
|
+
this.barChartContainer.selectAll('.bar')
|
|
1217
|
+
.transition('animateBar')
|
|
1206
1218
|
.duration(400)
|
|
1207
1219
|
.delay((...[, i]) => i * 150)
|
|
1208
1220
|
.attr('y', this.yFunction)
|
|
1209
1221
|
.attr('height', this.heightFunction);
|
|
1210
|
-
this.
|
|
1222
|
+
this.barChartContainer.selectAll('.bar')
|
|
1211
1223
|
.transition()
|
|
1212
1224
|
.duration(400)
|
|
1213
1225
|
.ease(d3.easeLinear)
|
|
@@ -1654,7 +1666,7 @@ export class barChart {
|
|
|
1654
1666
|
<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>`;
|
|
1655
1667
|
}
|
|
1656
1668
|
}
|
|
1657
|
-
return (h(Host, { key: '
|
|
1669
|
+
return (h(Host, { key: '3b919d1bdd201ddf5e4e5e2955190ed34c5aced3', ref: (el) => (this.host = el) }, h("svg", { key: '380b1d30cc3c7a71bf05fa4cdf4bb00def16b090', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: 'd39cde898124df9b34b994d0105fcc28e486a8f4' }, h("pattern", { key: '20d0ffdfa0e5310cad77ec994bf963f600de7b69', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '17d98e16afa2c42146a22a441d3dd0922ae767f5', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '3dfdebb12e5f2eba8b216acd4ff846e82615ed66', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: 'df76dde74f8e49e600f97b81c0c50e97147b9626', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '1d7a87ca509e067288af063e406d98962639560c', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '1c9618f2b783704cc0ceab0c38d8b525b9fdc520', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: '5217e3c1b3063bcb77fee7bebf631296ea95ab6b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '904c16605d7947862bbf77b7f5dcbf581284ef97', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'e285bef2d76e214a5615d4cee157bde5061e472a', 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() : ''}` }, h("digi-icon-table", { key: '2b278678de6fc8feda2f02c494c6e0dc76d1b3bb', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '85aa9d581cdf8332b87eebb80df10e2e654ec81e', 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() : ''}` }, h("digi-icon-chart", { key: 'e4396b006704ebd6ffad155ebb4be3ae7abaf5d0', slot: "icon" }), "Visa diagram"), h("div", { key: '6c8a51169075d49b9da6f0158042c06e5d38a6e2', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: '8b0b7b63ba4f8b428f6d728d48cdc05ae791a605', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: 'fadf084df0bfcd6f39831b92983091e6c0fefbd0', class: "chartTooltip", id: this.afId }, h("div", { key: '3a0258527320c1719bffec8c221bc9884d77ee1f', class: "tooltipHead" }, h("digi-icon-x", { key: 'b1013c82580116f7806b2bf31b08eea205a47db1', class: "tooltipClose" })), h("div", { key: 'e98e704c7f03fe0e0c1a90a9088f2962b9661a5c', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '56da797be96540039f52ae28a2bf250d46f47f12', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '3f3621240d161083d114df5d02a550d1f06613fa', class: "legend" })), h("div", { key: '427754c0a4b58f1cb334e89960d60c4ef22284f4', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
1658
1670
|
}
|
|
1659
1671
|
static get is() { return "digi-bar-chart"; }
|
|
1660
1672
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1,17 +1,20 @@
|
|
|
1
|
-
@
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
--digi--
|
|
5
|
-
--digi--
|
|
6
|
-
--digi--
|
|
7
|
-
--digi--
|
|
8
|
-
|
|
9
|
-
--digi--
|
|
10
|
-
--digi--
|
|
11
|
-
--digi--
|
|
12
|
-
--digi--
|
|
13
|
-
|
|
14
|
-
--digi--
|
|
15
|
-
--digi--
|
|
16
|
-
|
|
1
|
+
@use '../../../../../../styles/src/digi-styles.utils' as *;
|
|
2
|
+
|
|
3
|
+
@mixin digi-logo--variables() {
|
|
4
|
+
--digi--logo--img--min-width: #{rem(256)};
|
|
5
|
+
--digi--logo--img--max-width:#{rem(292)};
|
|
6
|
+
--digi--logo--img--max-width--large: #{rem(368)};
|
|
7
|
+
--digi--logo--img--max-width--system: #{rem(44)};
|
|
8
|
+
|
|
9
|
+
--digi--logo--padding: 1.375rem;
|
|
10
|
+
--digi--logo--padding--wide: var(--digi--gutter--larger);
|
|
11
|
+
--digi--logo--padding--large: var(--digi--gutter--medium);
|
|
12
|
+
--digi--logo--padding--large--wide: var(--digi--gutter--larger);
|
|
13
|
+
|
|
14
|
+
--digi--logo--logotype-color: var(--digi--color--logotype-color);
|
|
15
|
+
--digi--logo--color--primary: var(--digi--color--text--interactive--brand-primary);
|
|
16
|
+
--digi--logo--color--secondary: var(--digi--color--text--secondary);
|
|
17
|
+
|
|
18
|
+
--digi--logo--color--border--primary: var(--digi--color--text--primary);
|
|
19
|
+
--digi--logo--color--border--secondary: var(--digi--color--text--secondary);
|
|
17
20
|
}
|