@designsystem-se/af 39.0.1-beta.dark-mode → 39.1.0-beta.2

package/dist/cjs/digi-chart-line.cjs.entry.js

@@ -1,11 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-7a477838.js');
-const text = require('./text-65b1b58c.js');
-const linear = require('./linear-86314cb2.js');
-const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
+var index = require('./index-tbq85ezH.js');
+var text = require('./text-Cu3CaHGj.js');
+var transform = require('./transform-DteoCOaq.js');
+var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
 
 function sourceEvent(event) {
   let sourceEvent;
@@ -48,7 +46,7 @@ function noevent(event) {
 
 function dragDisable(view) {
   var root = view.document.documentElement,
-      selection = linear.select(view).on("dragstart.drag", noevent, nonpassivecapture);
+      selection = transform.select(view).on("dragstart.drag", noevent, nonpassivecapture);
   if ("onselectstart" in root) {
     selection.on("selectstart.drag", noevent, nonpassivecapture);
   } else {
@@ -59,7 +57,7 @@ function dragDisable(view) {
 
 function yesdrag(view, noclick) {
   var root = view.document.documentElement,
-      selection = linear.select(view).on("dragstart.drag", null);
+      selection = transform.select(view).on("dragstart.drag", null);
   if (noclick) {
     selection.on("click.drag", noevent, nonpassivecapture);
     setTimeout(function() { selection.on("click.drag", null); }, 0);
@@ -72,7 +70,7 @@ function yesdrag(view, noclick) {
   }
 }
 
-const constant$1 = x => () => x;
+var constant$1 = x => () => x;
 
 function DragEvent(type, {
   sourceEvent,
@@ -126,7 +124,7 @@ function drag() {
       subject = defaultSubject,
       touchable = defaultTouchable,
       gestures = {},
-      listeners = linear.dispatch("start", "drag", "end"),
+      listeners = transform.dispatch("start", "drag", "end"),
       active = 0,
       mousedownx,
       mousedowny,
@@ -149,7 +147,7 @@ function drag() {
     if (touchending || !filter.call(this, event, d)) return;
     var gesture = beforestart(this, container.call(this, event, d), event, d, "mouse");
     if (!gesture) return;
-    linear.select(event.view)
+    transform.select(event.view)
       .on("mousemove.drag", mousemoved, nonpassivecapture)
       .on("mouseup.drag", mouseupped, nonpassivecapture);
     dragDisable(event.view);
@@ -170,7 +168,7 @@ function drag() {
   }
 
   function mouseupped(event) {
-    linear.select(event.view).on("mousemove.drag mouseup.drag", null);
+    transform.select(event.view).on("mousemove.drag mouseup.drag", null);
     yesdrag(event.view, mousemoving);
     noevent(event);
     gestures.mouse("end", event);
@@ -568,7 +566,7 @@ function line(x$1, y$1) {
   return line;
 }
 
-const circle = {
+var circle = {
   draw(context, size) {
     const r = sqrt(size / pi);
     context.moveTo(r, 0);
@@ -576,7 +574,7 @@ const circle = {
   }
 };
 
-const diamond2 = {
+var diamond2 = {
   draw(context, size) {
     const r = sqrt(size) * 0.62625;
     context.moveTo(0, -r);
@@ -587,7 +585,7 @@ const diamond2 = {
   }
 };
 
-const square = {
+var square = {
   draw(context, size) {
     const w = sqrt(size);
     const x = -w / 2;
@@ -597,7 +595,7 @@ const square = {
 
 const sqrt3 = sqrt(3);
 
-const triangle = {
+var triangle = {
   draw(context, size) {
     const y = -sqrt(size / (sqrt3 * 3));
     context.moveTo(0, y * 2);
@@ -612,7 +610,7 @@ const s = sqrt(3) / 2;
 const k = 1 / sqrt(12);
 const a = (k / 2 + 1) * 3;
 
-const wye = {
+var wye = {
   draw(context, size) {
     const r = sqrt(size / a);
     const x0 = r / 2, y0 = r * k;
@@ -712,8 +710,7 @@ function basis(context) {
   return new Basis(context);
 }
 
-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 0.25rem 0;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}";
-const DigiChartLineStyle0 = chartLineCss;
+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 0.25rem 0;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(     --digi--global--color--neutral--grayscale--darkest-3   )}.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}`;
 
 const ChartLine = class {
     constructor(hostRef) {
@@ -729,6 +726,7 @@ const ChartLine = class {
             diamond2
         ];
         this._toggled = false;
+        this.afId = randomIdGenerator_util.randomIdGenerator('tooltip');
         this._tickSize = 0;
         // Selection list from legend chips
         this._selectedLines = [];
@@ -760,23 +758,23 @@ const ChartLine = class {
                 this.resizeSvg();
                 this.resizeLines();
                 this.repositionTooltip(); // Called on both div.resize, and window.resize
-                linear.select(this._legendDiv).style('width', this.dims.width + 'px');
+                transform.select(this._legendDiv).style('width', this.dims.width + 'px');
             });
         });
         // Observer for watching size changes when in table mode
         this.tableObserver = new ResizeObserver((entries) => {
             entries.forEach(() => {
-                linear.select(this._legendDiv).style('width', this.dims.width + 'px');
+                transform.select(this._legendDiv).style('width', this.dims.width + 'px');
                 this.resizeTable();
             });
         });
         this.dragStart = (e) => {
-            const container = linear.select(this._legendDiv).node();
+            const container = transform.select(this._legendDiv).node();
             this._dragStart = e.x - container.offsetLeft;
             this._scrollLeft = container.scrollLeft;
         };
         this.drag = (e) => {
-            const container = linear.select(this._legendDiv);
+            const container = transform.select(this._legendDiv);
             this._dragDir = e.x;
             const delta = this._dragDir - container.node().offsetLeft;
             const walk = (delta - this._dragStart) * 1; //scroll-fast
@@ -787,27 +785,27 @@ const ChartLine = class {
             // Fixed number of y-axis lines
             const step = this._chartData.meta && this._chartData.meta.numberOfReferenceLines
                 ? this._chartData.meta.numberOfReferenceLines
-                : 5, min = this._yAxis.domain()[0], max = this._yAxis.domain()[1], stepValue = (max - min) / (step - 1), tickValues = linear.range(min, max + stepValue, stepValue);
+                : 5, min = this._yAxis.domain()[0], max = this._yAxis.domain()[1], stepValue = (max - min) / (step - 1), tickValues = transform.range(min, max + stepValue, stepValue);
             if (!init) {
                 this._yAxisHandle
                     .style('font-size', this.fontSize)
                     .transition()
                     .duration(400)
-                    .call(linear.axisLeft(this._yAxis)
+                    .call(transform.axisLeft(this._yAxis)
                     .ticks(step)
                     .tickPadding(this.yPadding)
                     .tickValues(tickValues)
                     .tickSize(-(this.dims.width - this.margin.left))
-                    .tickFormat((d) => linear.formatLocale(this.axisNumberFormat).format(this.formatStyle)(d)))
+                    .tickFormat((d) => transform.formatLocale(this.axisNumberFormat).format(this.formatStyle)(d)))
                     .on('end', () => this.leftSetAxis());
             }
             else {
-                this._yAxisHandle.style('font-size', this.fontSize).call(linear.axisLeft(this._yAxis)
+                this._yAxisHandle.style('font-size', this.fontSize).call(transform.axisLeft(this._yAxis)
                     .ticks(step)
                     .tickPadding(this.yPadding)
                     .tickValues(tickValues)
                     .tickSize(-(this.dims.width - this.margin.left))
-                    .tickFormat((d) => linear.formatLocale(this.axisNumberFormat).format(this.formatStyle)(d)));
+                    .tickFormat((d) => transform.formatLocale(this.axisNumberFormat).format(this.formatStyle)(d)));
             }
             this._yAxisHandle.selectAll('line').attr('stroke', '#BDBDBD');
             this._yAxisHandle.select('.domain').attr('display', 'none');
@@ -833,8 +831,8 @@ const ChartLine = class {
         };
         // Initialize legend
         this.initLegend = () => {
-            const container = linear.select(this._legendDiv);
-            linear.select(this._legendDiv).style('width', this.dims.width + 'px');
+            const container = transform.select(this._legendDiv);
+            transform.select(this._legendDiv).style('width', this.dims.width + 'px');
             container.selectAll('.chip').remove();
             container.call(drag().on('start', this.dragStart).on('drag', this.drag));
             container
@@ -899,7 +897,7 @@ const ChartLine = class {
         this.highlightPath = (event, element) => {
             if (event.target.className != 'chip')
                 return;
-            const target = linear.select(event.target);
+            const target = transform.select(event.target);
             target.style('border', (d) => '2px solid ' + this.colorFunction(d));
             this._lineChartContainer
                 .selectAll('.linePath')
@@ -907,7 +905,7 @@ const ChartLine = class {
                 .duration(150)
                 .attr('stroke', (d, i, nodelist) => {
                 if (d.title === element.title) {
-                    linear.select(nodelist[i]).raise();
+                    transform.select(nodelist[i]).raise();
                     return this.colorFunction(d);
                 }
                 else
@@ -923,7 +921,7 @@ const ChartLine = class {
                 .selectAll('.symbolGroup')
                 .attr('fill', (d, i, nodelist) => {
                 if (d.title === element.title) {
-                    linear.select(nodelist[i]).raise();
+                    transform.select(nodelist[i]).raise();
                 }
             });
             this._lineChartContainer
@@ -945,7 +943,7 @@ const ChartLine = class {
         this.togglePath = (event) => {
             if (event.target.className != 'chip')
                 return;
-            const target = linear.select(event.target);
+            const target = transform.select(event.target);
             // Using color of text to identify what state the legend chip is in, so resetting this the last thing we do
             const swap = 'white' === target.style('color');
             target
@@ -985,7 +983,7 @@ const ChartLine = class {
         };
         // Coloring all lines
         this.colorLines = (event) => {
-            const target = linear.select(event.target);
+            const target = transform.select(event.target);
             target.style('border', '2px solid white');
             this._lineChartContainer
                 .selectAll('.linePath')
@@ -1158,13 +1156,13 @@ const ChartLine = class {
                             .attr('opacity', 0)
                             .transition()
                             .duration(400)
-                            .ease(linear.polyInOut)
+                            .ease(transform.polyInOut)
                             .attr('opacity', 1);
                     }, (update) => {
                         update
                             .transition()
                             .duration(400)
-                            .ease(linear.polyInOut)
+                            .ease(transform.polyInOut)
                             .attr('d', (d) => d ? this.symbolType(d.index) : null)
                             .attr('fill', (d) => d ? this.colorFunction(d) : null)
                             .attr('transform', (d) => d
@@ -1183,10 +1181,10 @@ const ChartLine = class {
         // Setting dimension variable
         this.setDims = (onlyHeight = false) => {
             // Get title dimensions
-            const tempTitle = linear.select(this._titleDiv).node().getBoundingClientRect(), tempLegend = linear.select(this._legendDiv).node().getBoundingClientRect();
+            const tempTitle = transform.select(this._titleDiv).node().getBoundingClientRect(), tempLegend = transform.select(this._legendDiv).node().getBoundingClientRect();
             const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
             if (!onlyHeight)
-                this.dims = linear.select(this._chartDiv).node().getBoundingClientRect();
+                this.dims = transform.select(this._chartDiv).node().getBoundingClientRect();
             this.dims.height =
                 this._maxHeight - tempLegend.height - tempTitle.height - 1.75 * rem;
         };
@@ -1209,7 +1207,7 @@ const ChartLine = class {
                 this._tickSize) - 2, 1), this._chartData.data.xValues.length);
             this._xAxisHandle
                 .attr('transform', 'translate(0,' + (this.dims.height - this.margin.bottom) + ')')
-                .call(linear.axisBottom(this._xAxis)
+                .call(transform.axisBottom(this._xAxis)
                 .ticks(ticks)
                 .tickPadding(this.xPadding)
                 .tickFormat((d) => {
@@ -1234,7 +1232,7 @@ const ChartLine = class {
             ]);
             const ticks = Math.min(Math.floor((this.dims.width - this.margin.left - this.margin.right) /
                 this._tickSize) - 2, this._xAxis.domain()[1]);
-            this._xAxisHandle.call(linear.axisBottom(this._xAxis)
+            this._xAxisHandle.call(transform.axisBottom(this._xAxis)
                 .ticks(ticks)
                 .tickPadding(this.xPadding)
                 .tickFormat((d) => {
@@ -1375,7 +1373,7 @@ const ChartLine = class {
                     ? '<span>' +
                         d.title +
                         '</span><span style="margin-left:0.75rem;">' +
-                        linear.formatLocale(this.axisNumberFormat).format(this.formatStyle)(d.yValues[this._tooltipDataIndex]) +
+                        transform.formatLocale(this.axisNumberFormat).format(this.formatStyle)(d.yValues[this._tooltipDataIndex]) +
                         '</span>'
                     : null;
             });
@@ -1396,13 +1394,13 @@ const ChartLine = class {
         };
         this.initYAxis = (empty) => {
             // Y Axis
-            this._yAxis = linear.linear()
+            this._yAxis = transform.linear()
                 .domain([0, empty ? 10 : this._maxVal])
                 .nice(3)
                 .range([this.dims.height - this.margin.bottom, this.margin.top]);
             // The magic number is just needed in initialization, because getting the exact size is impossible during the initialization
             this.margin.left =
-                this.getTextSize(linear.formatLocale(this.axisNumberFormat).format(this.formatStyle)(this._yAxis.domain()[1])) +
+                this.getTextSize(transform.formatLocale(this.axisNumberFormat).format(this.formatStyle)(this._yAxis.domain()[1])) +
                     this.yPadding +
                     3;
             this._lineChartContainer = this._svg
@@ -1424,20 +1422,20 @@ const ChartLine = class {
                             1;
                 else
                     this.margin.right =
-                        this.getTextSize(linear.max(this._chartData.data.xValues).toString()) /
+                        this.getTextSize(transform.max(this._chartData.data.xValues).toString()) /
                             2 +
                             1;
             }
-            this._xAxis = linear.linear()
+            this._xAxis = transform.linear()
                 .domain([
-                empty ? 1 : linear.min(this._chartData.data.xValues),
-                empty ? 10 : linear.max(this._chartData.data.xValues)
+                empty ? 1 : transform.min(this._chartData.data.xValues),
+                empty ? 10 : transform.max(this._chartData.data.xValues)
             ]) // This is the min and the max of the data
                 .range([0, this.dims.width - this.margin.left - this.margin.right]);
-            this._lineScale = linear.linear()
+            this._lineScale = transform.linear()
                 .domain([
-                empty ? 1 : linear.min(this._chartData.data.xValues),
-                empty ? 10 : linear.max(this._chartData.data.xValues)
+                empty ? 1 : transform.min(this._chartData.data.xValues),
+                empty ? 10 : transform.max(this._chartData.data.xValues)
             ]) // This is the min and the max of the data
                 .range([0, this.dims.width - this.margin.left - this.margin.right]);
             const ticks = Math.min(Math.max(Math.floor((this.dims.width - this.margin.left - this.margin.right) /
@@ -1447,7 +1445,7 @@ const ChartLine = class {
                 .attr('transform', 'translate(0,' + (this.dims.height - this.margin.bottom) + ')')
                 .attr('class', 'xAxis')
                 .style('font-size', this.fontSize)
-                .call(linear.axisBottom(this._xAxis)
+                .call(transform.axisBottom(this._xAxis)
                 .ticks(ticks)
                 .tickSize(this.xTickSize)
                 .tickPadding(this.xPadding)
@@ -1478,7 +1476,7 @@ const ChartLine = class {
                     if (this._yAxis(selData))
                         return this._yAxis(selData);
                     else {
-                        linear.select(circleList[i]).attr('display', 'none');
+                        transform.select(circleList[i]).attr('display', 'none');
                         return null;
                     }
                 });
@@ -1494,7 +1492,7 @@ const ChartLine = class {
                     if (this._yAxis(selData))
                         return this._yAxis(selData);
                     else {
-                        linear.select(circleList[i]).attr('display', 'none');
+                        transform.select(circleList[i]).attr('display', 'none');
                         return null;
                     }
                 });
@@ -1540,7 +1538,7 @@ const ChartLine = class {
                     this._tooltip
                         .transition('moveTooltip')
                         .duration(transitionTimer)
-                        .ease(linear.polyInOut)
+                        .ease(transform.polyInOut)
                         .style('left', pos - this.margin.left + 'px');
                 else
                     this._tooltip.style('left', pos - this.margin.left + 'px');
@@ -1553,7 +1551,7 @@ const ChartLine = class {
         };
         this.mapColorToLine = () => {
             // list of group names
-            this._Color = linear.ordinal()
+            this._Color = transform.ordinal()
                 .domain(this._chartData.data.series.map(function (d) {
                 return d.title;
             }))
@@ -1570,7 +1568,7 @@ const ChartLine = class {
         };
         this.computeMaxVal = () => {
             // Compute max value from datasets
-            this._maxVal = parseFloat(linear.max(this._chartData.data.series, (d) => linear.max(d['yValues'])));
+            this._maxVal = parseFloat(transform.max(this._chartData.data.series, (d) => transform.max(d['yValues'])));
         };
         // Updates number format if specified to be in percentage
         this.checkPercentage = () => {
@@ -1590,8 +1588,8 @@ const ChartLine = class {
             this.lineChartObserver.disconnect();
             this.tableObserver.observe(this._chartDiv);
             this._status.innerHTML = '<p>Visas som tabell</p>';
-            linear.select(this._host).select('.tableButton').style('display', 'none');
-            linear.select(this._host).select('.chartButton').style('display', null);
+            transform.select(this._host).select('.tableButton').style('display', 'none');
+            transform.select(this._host).select('.chartButton').style('display', null);
             event.target.nextSibling.lastChild.focus();
             const duration = 150;
             this._svg
@@ -1605,13 +1603,13 @@ const ChartLine = class {
                 this._tableDiv.style['display'] = 'block';
                 this.setTableContent();
                 this.setTableDimensions();
-                linear.select(this._tableDiv)
+                transform.select(this._tableDiv)
                     .style('opacity', 0)
                     .transition('fadein')
                     .duration(duration)
                     .style('opacity', 1);
             });
-            linear.select(this._legendDiv)
+            transform.select(this._legendDiv)
                 .style('opacity', 1)
                 .transition('fadeout')
                 .duration(duration)
@@ -1626,10 +1624,10 @@ const ChartLine = class {
         this.reInitChart = (event) => {
             this.tableObserver.disconnect();
             this._status.innerHTML = '<p>Visas som diagram</p>';
-            linear.select(this._host).select('.tableButton').style('display', null);
-            linear.select(this._host).select('.chartButton').style('display', 'none');
+            transform.select(this._host).select('.tableButton').style('display', null);
+            transform.select(this._host).select('.chartButton').style('display', 'none');
             event.target.previousSibling.lastChild.focus();
-            const table = linear.select(this._tableDiv);
+            const table = transform.select(this._tableDiv);
             table
                 .style('opacity', 1)
                 .transition()
@@ -1644,7 +1642,7 @@ const ChartLine = class {
                     .transition()
                     .duration(150)
                     .attr('opacity', 1);
-                linear.select(this._legendDiv)
+                transform.select(this._legendDiv)
                     .style('display', null)
                     .style('opacity', 0)
                     .transition()
@@ -1652,9 +1650,6 @@ const ChartLine = class {
                     .style('opacity', 1);
             });
         };
-        this.afHeadingLevel = undefined;
-        this.afId = randomIdGenerator_util.randomIdGenerator('tooltip');
-        this.afChartData = undefined;
     }
     afChartDataUpdate() {
         const data = this.afChartData;
@@ -1677,10 +1672,10 @@ const ChartLine = class {
                 this.xPadding +
                 this.xTickSize;
         this.lineChartObserver.observe(this._chartDiv);
-        linear.select(this._chartDiv).select('svg').remove();
+        transform.select(this._chartDiv).select('svg').remove();
         // Initialize an empty div, that we can place info in for tooltip
         // Styling for tooltip is in .scss file
-        this._tooltip = linear.select('#' + this.afId);
+        this._tooltip = transform.select('#' + this.afId);
         this._tooltip.select('.close').on('click', this.closeTooltip);
         this._tooltipHeading =
             'h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1);
@@ -1690,15 +1685,15 @@ const ChartLine = class {
             .insert(this._tooltipHeading, ':first-child') // increment heading level by one
             .style('margin', '0 0.75rem')
             .style('font-weight', '500');
-        this._maxHeight = linear.select(this._host)
+        this._maxHeight = transform.select(this._host)
             .node()
             .parentNode.getBoundingClientRect().height;
         this.setDims();
         this.setTickSize();
         this.checkPercentage();
-        linear.select(this._chartDiv).attr('height', this.dims.height + 'px');
+        transform.select(this._chartDiv).attr('height', this.dims.height + 'px');
         // Appending svg
-        this._svg = linear.select(this._chartDiv)
+        this._svg = transform.select(this._chartDiv)
             .append('svg')
             .attr('aria-hidden', true)
             .attr('role', 'img')
@@ -1737,7 +1732,7 @@ const ChartLine = class {
             .attr('stroke-width', '1px')
             .attr('r', 7)
             .attr('display', 'none');
-        linear.select(window).on('resize.' + this.afId, this.repositionTooltip);
+        transform.select(window).on('resize.' + this.afId, this.repositionTooltip);
     }
     // Initializing chart with empty dataset
     initEmpty() {
@@ -1749,11 +1744,11 @@ const ChartLine = class {
                 Number(this.fontSize.replace(/[^\d.]|\.(?=.*\.)/g, '')) +
                 this.xPadding +
                 this.xTickSize;
-        linear.select(this._chartDiv).select('svg').remove();
+        transform.select(this._chartDiv).select('svg').remove();
         // Initialize an empty div, that we can place info in for tooltip
         // Styling for tooltip is in .scss file
-        this._tooltip = linear.select('#' + this.afId);
-        linear.select('digi-icon-x').on('click', this.closeTooltip);
+        this._tooltip = transform.select('#' + this.afId);
+        transform.select('digi-icon-x').on('click', this.closeTooltip);
         this._tooltipHeading =
             'h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1);
         // Add heading placeholder for heading
@@ -1762,12 +1757,12 @@ const ChartLine = class {
             .insert(this._tooltipHeading, ':first-child') // increment heading level by one
             .style('margin', '0 0.75rem')
             .style('font-weight', '500');
-        this._maxHeight = linear.select(this._host)
+        this._maxHeight = transform.select(this._host)
             .node()
             .parentNode.getBoundingClientRect().height;
         this.setDims();
-        linear.select(this._chartDiv).attr('height', this.dims.height + 'px');
-        this._svg = linear.select(this._chartDiv)
+        transform.select(this._chartDiv).attr('height', this.dims.height + 'px');
+        this._svg = transform.select(this._chartDiv)
             .append('svg')
             .attr('aria-hidden', true);
         this._svg.attr('width', this.dims.width).attr('height', this.dims.height);
@@ -1796,7 +1791,7 @@ const ChartLine = class {
     }
     loadingState(empty) {
         this._loading = true;
-        linear.select('.tableButton').style('display', 'none');
+        transform.select('.tableButton').style('display', 'none');
         const duration = 400;
         const LineFunc = line()
             .defined((d) => d[1] != null)
@@ -1812,17 +1807,17 @@ const ChartLine = class {
             .on('touchmove', null)
             .on('mouseup', null)
             .on('mouseleave', null);
-        linear.select(this._titleDiv)
+        transform.select(this._titleDiv)
             .select(this.afHeadingLevel)
             .html(`${text._t.loading}...`);
-        const height = linear.select(this._titleDiv).style('height');
-        linear.select(this._titleDiv)
+        const height = transform.select(this._titleDiv).style('height');
+        transform.select(this._titleDiv)
             .style('height', this._prevHeight)
             .transition('adjust')
             .duration(400)
             .style('height', height)
-            .on('end', () => linear.select(this._titleDiv).style('height', null));
-        linear.select(this._legendDiv).style('display', 'none');
+            .on('end', () => transform.select(this._titleDiv).style('height', null));
+        transform.select(this._legendDiv).style('display', 'none');
         const animateRandomLine = () => {
             let firstVal = this._xAxis.domain()[0];
             const randomData = [...Array(this._xAxis.domain()[1])].map(() => {
@@ -1849,7 +1844,7 @@ const ChartLine = class {
                 .ease(quadInOut)
                 .attrTween('stroke-dasharray', function () {
                 const length = this.getTotalLength();
-                return linear.interpolate(`0,${length}`, `${length},${length}`);
+                return transform.interpolate(`0,${length}`, `${length},${length}`);
             })
                 .on('end', () => {
                 this._lineChartContainer
@@ -1885,7 +1880,7 @@ const ChartLine = class {
                 .data(data)
                 .transition()
                 .duration(duration)
-                .ease(linear.polyInOut)
+                .ease(transform.polyInOut)
                 .attr('d', (d) => this._LineFunc(d.line))
                 .on('end', (...[, i]) => (i === 0 ? animateRandomLine() : null));
             this._lineChartContainer
@@ -1893,7 +1888,7 @@ const ChartLine = class {
                 .selectAll('.symbol')
                 .transition()
                 .duration(duration)
-                .ease(linear.linear$1)
+                .ease(transform.linear$1)
                 .attr('transform', (d) => d
                 ? `translate(${this._lineScale(d.x)},${this._yAxis(this._yAxis.domain()[0])})`
                 : null)
@@ -1908,9 +1903,9 @@ const ChartLine = class {
     updateSvg() {
         // displaying legend again
         if (this._loading) {
-            linear.select(this._host).select('.tableButton').style('display', null);
-            linear.select(this._legendDiv).style('display', null);
-            linear.select(this._titleDiv).style('height', null);
+            transform.select(this._host).select('.tableButton').style('display', null);
+            transform.select(this._legendDiv).style('display', null);
+            transform.select(this._titleDiv).style('height', null);
         }
         if (this._chartData.data.xValueNames)
             this.margin.right =
@@ -1919,14 +1914,14 @@ const ChartLine = class {
                     1;
         else
             this.margin.right =
-                this.getTextSize(linear.max(this._chartData.data.xValues).toString()) / 2 +
+                this.getTextSize(transform.max(this._chartData.data.xValues).toString()) / 2 +
                     1;
         this.checkPercentage();
         this.setDims(true);
         this.mapColorToLine();
         this.computeMaxVal();
         this.setTickSize();
-        linear.select(this._chartDiv).attr('height', this.dims.height + 'px');
+        transform.select(this._chartDiv).attr('height', this.dims.height + 'px');
         // Updating Svg attributes
         this._svg
             .attr('width', this.dims.width + 'px')
@@ -1935,13 +1930,13 @@ const ChartLine = class {
             ? 'Linjediagram om ' + this._chartData.title.toLowerCase()
             : 'Linjediagram');
         // Y Axis
-        this._yAxis = linear.linear()
+        this._yAxis = transform.linear()
             .domain([0, this._maxVal])
             .nice(3)
             .range([this.dims.height - this.margin.bottom, this.margin.top]);
         // Updating margins
         this.margin.left =
-            this.getTextSize(linear.formatLocale(this.axisNumberFormat).format(this.formatStyle)(this._yAxis.domain()[1])) +
+            this.getTextSize(transform.formatLocale(this.axisNumberFormat).format(this.formatStyle)(this._yAxis.domain()[1])) +
                 this.yPadding +
                 3;
         /****  Update xAxis ****/
@@ -1950,7 +1945,7 @@ const ChartLine = class {
         this._lineChartContainer
             .transition('position')
             .duration(400)
-            .ease(linear.polyInOut)
+            .ease(transform.polyInOut)
             .attr('width', this.dims.width)
             .attr('height', this.dims.height)
             .attr('transform', `translate(${this.margin.left},0)`);
@@ -1959,20 +1954,20 @@ const ChartLine = class {
         //this.leftSetAxis();
         this.addSymbols(true);
         if (this._loading) {
-            linear.select(this._host).select('.tableButton').style('display', null);
+            transform.select(this._host).select('.tableButton').style('display', null);
             this.addListenersToChart();
-            const height = linear.select(this._titleDiv).style('height');
-            linear.select(this._titleDiv)
+            const height = transform.select(this._titleDiv).style('height');
+            transform.select(this._titleDiv)
                 .style('height', this._prevHeight)
                 .transition('adjust')
                 .duration(400)
                 .style('height', height)
-                .on('end', () => linear.select(this._titleDiv).style('height', null));
-            linear.select(this._legendDiv)
+                .on('end', () => transform.select(this._titleDiv).style('height', null));
+            transform.select(this._legendDiv)
                 .style('opacity', 0)
                 .transition()
                 .duration(400)
-                .ease(linear.polyInOut)
+                .ease(transform.polyInOut)
                 .style('opacity', 1);
             this._lineChartContainer.selectAll('.linePath').on('end', null);
             // Setting starting state for symbols
@@ -2012,7 +2007,7 @@ const ChartLine = class {
                     .selectAll('.linePath')
                     .transition()
                     .duration(400)
-                    .ease(linear.polyInOut)
+                    .ease(transform.polyInOut)
                     .attr('d', (d) => this._LineFunc(d.line));
                 // Transitioning in symbols
                 this._lineChartContainer
@@ -2020,7 +2015,7 @@ const ChartLine = class {
                     .selectAll('.symbol')
                     .transition()
                     .duration(400)
-                    .ease(linear.polyInOut)
+                    .ease(transform.polyInOut)
                     .attr('transform', (d) => d
                     ? `translate(${this._lineScale(d.x)},${this._yAxis(d.val)})`
                     : null)
@@ -2035,7 +2030,7 @@ const ChartLine = class {
                 .join('path')
                 .transition()
                 .duration(400)
-                .ease(linear.polyInOut)
+                .ease(transform.polyInOut)
                 .attr('class', 'linePath')
                 .attr('stroke', (d) => this.colorFunction(d))
                 .attr('stroke-linecap', this._lineCap)
@@ -2053,7 +2048,7 @@ const ChartLine = class {
                 .join('circle')
                 .transition('New circles')
                 .duration(400)
-                .ease(linear.polyInOut)
+                .ease(transform.polyInOut)
                 .attr('stroke', 'white')
                 .attr('fill', (d) => this.colorFunction(d))
                 .attr('stroke-width', '1px')
@@ -2063,7 +2058,7 @@ const ChartLine = class {
             this._TooltipLine
                 .transition()
                 .duration(400)
-                .ease(linear.polyInOut)
+                .ease(transform.polyInOut)
                 .attr('x1', this._xAxis(stringPoint) + this.margin.left)
                 .attr('x2', this._xAxis(stringPoint) + this.margin.left)
                 .attr('y1', this._yAxis(this._maxVal))
@@ -2103,7 +2098,7 @@ const ChartLine = class {
             })
                 .transition()
                 .duration(400)
-                .ease(linear.polyInOut)
+                .ease(transform.polyInOut)
                 .style('transform', () => {
                 // We reset the position of the tooltip, and adjust for the maximum value, -1px for it to align perfectly
                 return `translateY(${this._yAxis(this._maxVal) - this._tooltip.node().getBoundingClientRect().height - 9}px)`;
@@ -2112,7 +2107,7 @@ const ChartLine = class {
                 .select('.tooltipPointer')
                 .transition()
                 .duration(400)
-                .ease(linear.polyInOut)
+                .ease(transform.polyInOut)
                 .attr('transform', `translate(${this._xAxis(stringPoint) + this.margin.left},${this._yAxis(this._maxVal) - 7}) rotate(180) scale(1.5,1.0)`);
         }
         else {
@@ -2145,7 +2140,7 @@ const ChartLine = class {
         };
     }
     componentWillUpdate() {
-        this._prevHeight = linear.select(this._titleDiv).style('height');
+        this._prevHeight = transform.select(this._titleDiv).style('height');
     }
     componentDidUpdate() {
         if (Object.keys(this._chartData).length === 0)
@@ -2162,7 +2157,7 @@ const ChartLine = class {
     // Returns pixelwidth of text given the current fontSize (costly function using .each)
     getTextSize(text) {
         const textWidth = [];
-        const svg = linear.select(this._chartDiv).append('svg');
+        const svg = transform.select(this._chartDiv).append('svg');
         svg
             .selectAll('dummyText')
             .data([text])
@@ -2208,7 +2203,7 @@ const ChartLine = class {
                 .attr('transform', (...[, i, nodelist]) => {
                 const size = nodelist[i].getComputedTextLength();
                 shiftArray.push(size);
-                return `translate(${-1 * (this.margin.left - (size + this.yPadding))},0)`;
+                return `translate(${ -1 * (this.margin.left - (size + this.yPadding))},0)`;
             });
             this._yAxisHandle
                 .selectAll('line')
@@ -2224,7 +2219,7 @@ const ChartLine = class {
                 .attr('transform', (...[, i, nodelist]) => {
                 const size = nodelist[i].getComputedTextLength();
                 shiftArray.push(size);
-                return `translate(${-1 * (this.margin.left - (size + this.yPadding))},0)`;
+                return `translate(${ -1 * (this.margin.left - (size + this.yPadding))},0)`;
             });
             this._yAxisHandle.selectAll('line').attr('x1', (...[, i]) => {
                 return -1 * (this.margin.left - (shiftArray[i] + this.yPadding));
@@ -2244,11 +2239,11 @@ const ChartLine = class {
         this._tableDiv.innerHTML = `<digi-table af-size="small" af-variation="primary"> <table><caption>${this._chartData.title}</caption><thead><tr>${this.headings()}</tr></thead><tbody>${this.tableBody()}</tbody></table></digi-table>`;
     }
     setTableDimensions() {
-        const table = linear.select(this._tableDiv);
+        const table = transform.select(this._tableDiv);
         table
             // The last value is for compensating the padding set on the table element, changing padding in css, will need change in these two lines
             .style('height', this._maxHeight -
-            linear.select(this._titleDiv).node().getBoundingClientRect().height -
+            transform.select(this._titleDiv).node().getBoundingClientRect().height -
             parseFloat(getComputedStyle(document.documentElement).fontSize) *
                 0.65 +
             'px');
@@ -2257,14 +2252,14 @@ const ChartLine = class {
             'px');
     }
     animateTableDimensions() {
-        const height = linear.select(this._titleDiv).style('height');
-        linear.select(this._titleDiv)
+        const height = transform.select(this._titleDiv).style('height');
+        transform.select(this._titleDiv)
             .style('height', this._prevHeight)
             .transition('adjust')
             .duration(400)
             .style('height', height)
-            .on('end', () => linear.select(this._titleDiv).style('height', null));
-        const table = linear.select(this._tableDiv);
+            .on('end', () => transform.select(this._titleDiv).style('height', null));
+        const table = transform.select(this._tableDiv);
         table
             .transition('adjustHeight')
             .duration(400)
@@ -2297,7 +2292,7 @@ const ChartLine = class {
         loopable.forEach((elem, index) => {
             let cells = '';
             this._coreSeries.forEach((serie) => {
-                cells = cells.concat(`<td>${serie.yValues[index] != null ? linear.formatLocale(this.axisNumberFormat).format(this.formatStyle)(serie.yValues[index]) : '-'}</td>`);
+                cells = cells.concat(`<td>${serie.yValues[index] != null ? transform.formatLocale(this.axisNumberFormat).format(this.formatStyle)(serie.yValues[index]) : '-'}</td>`);
             });
             body = body.concat(`<tr><th scope='row'>${elem}${cells}</th></tr>`);
         });
@@ -2313,9 +2308,11 @@ const ChartLine = class {
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
-        "afChartData": ["afChartDataUpdate"]
+        "afChartData": [{
+                "afChartDataUpdate": 0
+            }]
     }; }
 };
-ChartLine.style = DigiChartLineStyle0;
+ChartLine.style = chartLineCss();
 
 exports.digi_chart_line = ChartLine;