@postnord/pn-marketweb-components 2.0.144 → 2.0.146

package/collection/components/charts/pn-chart/pn-chart-helper.js

@@ -1,4 +1,4 @@
-export const chartCfg = (dataChartType, data) => {
+export const chartCfg = (dataChartType, data, moreThanOneSet = false) => {
   let cfg = {
     type: dataChartType,
     data: data,
@@ -7,13 +7,14 @@ export const chartCfg = (dataChartType, data) => {
       maintainAspectRatio: false,
       aspectRatio: 1,
       legend: {
-        display: true,
+        display: moreThanOneSet,
         position: 'bottom',
         labels: { boxWidth: 20, fontFamily: 'sans-serif' },
       },
       tooltip: {
         enabled: true,
       },
+      plugins: { deferred: { enabled: true, yOffset: '50%', delay: 300 } },
     },
   };
   if (dataChartType === 'bar') {
@@ -27,6 +28,9 @@ export const chartCfg = (dataChartType, data) => {
           ],
         } }) });
   }
+  if (dataChartType === 'doughnut' || dataChartType === 'pie') {
+    return Object.assign(Object.assign({}, cfg), { options: Object.assign(Object.assign({}, cfg.options), { legend: Object.assign(Object.assign({}, cfg.options.legend), { display: true }) }) });
+  }
   return cfg;
 };
 export const dataSetProps = (set, dataChartType) => {

package/collection/components/charts/pn-chart/pn-chart.js

@@ -1,6 +1,7 @@
 import { Chart } from 'chart.js';
-import { h, Host, } from '@stencil/core';
-import { chartCfg, dataSetProps, } from './pn-chart-helper';
+import ChartDeferred from 'chartjs-plugin-deferred';
+import { h, Host } from '@stencil/core';
+import { chartCfg, dataSetProps } from './pn-chart-helper';
 export class PnChart {
   constructor() {
     this.labels = null;
@@ -10,6 +11,7 @@ export class PnChart {
   }
   dataChangeHandler() {
     this.parsedDataSets = JSON.parse(this.dataSets);
+    this.numberOfSetsGreaterThanOne = this.parsedDataSets.length > 1;
     this.parsedDatasetWithDataParsed = this.parsedDataSets.map(set => dataSetProps(set, this.dataChartType));
     this.data = Object.assign(Object.assign({}, this.data), { datasets: this.parsedDatasetWithDataParsed });
   }
@@ -22,8 +24,9 @@ export class PnChart {
     this.labelsChangeHandler();
   }
   componentDidLoad() {
+    Chart.plugins.register(ChartDeferred);
     this.myChartCtxRef = this.element.querySelector('#chart-canvas');
-    this.myChart = new Chart(this.myChartCtxRef, chartCfg(this.dataChartType, this.data));
+    this.myChart = new Chart(this.myChartCtxRef, chartCfg(this.dataChartType, this.data, this.numberOfSetsGreaterThanOne));
   }
   render() {
     return (h(Host, null, h("div", { class: "chart-wrapper" }, h("canvas", { id: "chart-canvas", class: "pnChart" }))));

package/collection/components/charts/pn-charts-card/pn-charts-card.stories.js

@@ -24,7 +24,7 @@ const TemplateChartsCardOne = ({ ...args }) => {
           open-in-new-window="${args.openInNewWindow}"
           data-chart-color="blue"         
         >
-            <pn-chart data-chart-type="bar" slot="chart" labels='["XSmall", "Small", "Medium"]' data-sets='[{ "label": "# of packages in billions", "backgroundColor": ["#E0F8FF", "#8EDDF9", "#00A0D6"], "data": [50, 100, 500] }]'></pn-chart>
+            <pn-chart data-chart-type="bar" slot="chart" labels='["XSmall", "Small", "Medium"]' data-sets='[{ "label": "# of packages in billions", "backgroundColor": ["#E0F8FF", "#8EDDF9", "#00A0D6"], "data": [50, 100, 500] }, { "label": "# of packages in billions", "backgroundColor": ["red", "green", "pink"], "data": [70, 110, 600] }]'></pn-chart>
            
         </pn-charts-card>
     </div>

package/collection/components/data-visualization/pn-stats-info/pn-stats-info-data/pn-stats-info-data.js

@@ -1,4 +1,5 @@
-import { h, Host, } from '@stencil/core';
+import { v4 as uuidv4 } from 'uuid';
+import { h, Host } from '@stencil/core';
 import { animateValue } from './animationHelper';
 import { inViewport } from './viewIntersectionHelper';
 export class PnStatsInfoData {
@@ -11,22 +12,29 @@ export class PnStatsInfoData {
     this.data = 0;
     this.unit = null;
     this.preamble = null;
-    this.compId = null;
     this.duration = 1000;
+    this.index = null;
     this.hasBeenShown = false;
+    this.compId = null;
+  }
+  generateUniqueId() {
+    return uuidv4();
+  }
+  componentWillLoad() {
+    this.compId = this.generateUniqueId();
   }
   watchStateHandlder(newValue, oldValue) {
-    const obj = document.getElementById(`pn-stats-info-data-${this.compId}`);
+    const obj = document.getElementById(`pn-stats-info-data-${this.compId}-${this.index}`);
     if (obj.classList.contains('is-inViewport') && newValue !== oldValue) {
       animateValue(obj, 0, this.data, this.duration);
     }
   }
   render() {
-    return (h(Host, null, h("div", { class: "pn-stats-info-data__container" }, h("div", { class: "pn-stats-info-data__container__content" }, h("div", { class: "pn-stats-info-data__container__content__data", id: `pn-stats-info-data-${this.compId}` }), h("div", { class: "pn-stats-info-data__container__content__unit" }, this.unit)), h("div", { class: "pn-stats-info-data__container__content__preamble" }, this.preamble))));
+    return (h(Host, null, h("div", { class: "pn-stats-info-data__container" }, h("div", { class: "pn-stats-info-data__container__content" }, h("div", { class: "pn-stats-info-data__container__content__data", id: `pn-stats-info-data-${this.compId}-${this.index}` }), h("div", { class: "pn-stats-info-data__container__content__unit" }, this.unit)), h("div", { class: "pn-stats-info-data__container__content__preamble" }, this.preamble))));
   }
   componentDidRender() {
     const observer = new IntersectionObserver(entries => inViewport(entries, 'is-inViewport', this.inViewPortCallback));
-    const obj = document.getElementById(`pn-stats-info-data-${this.compId}`);
+    const obj = document.getElementById(`pn-stats-info-data-${this.compId}-${this.index}`);
     observer.observe(obj);
   }
   static get is() { return "pn-stats-info-data"; }
@@ -96,25 +104,25 @@ export class PnStatsInfoData {
         "reflect": false,
         "defaultValue": "null"
       },
-      "compId": {
-        "type": "string",
+      "duration": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "comp-id",
+        "attribute": "duration",
         "reflect": false,
-        "defaultValue": "null"
+        "defaultValue": "1000"
       },
-      "duration": {
+      "index": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -123,20 +131,21 @@ export class PnStatsInfoData {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "duration",
+        "attribute": "index",
         "reflect": false,
-        "defaultValue": "1000"
+        "defaultValue": "null"
       }
     };
   }
   static get states() {
     return {
-      "hasBeenShown": {}
+      "hasBeenShown": {},
+      "compId": {}
     };
   }
   static get watchers() {

package/collection/components/data-visualization/pn-stats-info/pn-stats-info.css

@@ -13,10 +13,20 @@ pn-stats-info .pn-stats-info__container__content {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 2rem;
+  padding: 2.4rem 2.4rem 1.6rem;
   width: 100%;
   background-color: #0D234B;
-  border-radius: 24px;
+  border-radius: 2.4rem;
+}
+@media screen and (min-width: 992px) {
+  pn-stats-info .pn-stats-info__container__content {
+    padding: 4rem 2.4rem 1.6rem;
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-stats-info .pn-stats-info__container__content {
+    padding: 5.6rem 2.4rem 3.2rem;
+  }
 }
 pn-stats-info .pn-stats-info__container__content__heading {
   color: #F06365;
@@ -38,34 +48,54 @@ pn-stats-info .pn-stats-info__container__content__data {
   flex-direction: row;
   justify-content: center;
   flex-wrap: wrap;
-  min-height: 20rem;
   width: 100%;
 }
-@media screen and (min-width: 1640px) {
-  pn-stats-info .pn-stats-info__container__content__data {
-    width: 65rem;
+pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2n),
+pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2n) ~ pn-stats-info-data {
+  width: 50%;
+}
+@media screen and (min-width: 768px) {
+  pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(1) {
+    width: 100%;
+  }
+  pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2),
+pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2) ~ pn-stats-info-data {
+    width: 50%;
+  }
+  pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n),
+pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n) ~ pn-stats-info-data {
+    width: 33%;
+  }
+  pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8),
+pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8) ~ pn-stats-info-data {
+    width: 25%;
   }
 }
-pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(1) {
-  width: 100%;
+pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container {
+  justify-content: flex-start;
+  min-height: 0;
+  padding: 2.4rem;
 }
-pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2),
-pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2) ~ pn-stats-info-data {
-  width: 50%;
+@media screen and (min-width: 768px) {
+  pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container {
+    min-height: 0;
+  }
 }
-pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n),
-pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n) ~ pn-stats-info-data {
-  width: 33%;
+@media screen and (min-width: 992px) {
+  pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container {
+    min-height: 0;
+  }
 }
-pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8),
-pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8) ~ pn-stats-info-data {
-  width: 25%;
+@media screen and (min-width: 1200px) {
+  pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container {
+    min-height: 0;
+  }
 }
 
 pn-stats-info[data-stats-image=background] .pn-stats-info__container__map {
   display: none;
-  border-top-left-radius: 24px;
-  border-bottom-left-radius: 24px;
+  border-top-left-radius: 2.4rem;
+  border-bottom-left-radius: 2.4rem;
 }
 @media screen and (min-width: 768px) {
   pn-stats-info[data-stats-image=background] .pn-stats-info__container__map {
@@ -90,40 +120,31 @@ pn-stats-info[data-stats-image=background] .pn-stats-info__container__content {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 2rem;
   width: 100%;
   background-color: #0D234B;
   background-repeat: no-repeat;
   background-position: bottom left;
   background-size: 50%;
   background-blend-mode: overlay;
-  padding-bottom: 2rem;
-  border-radius: 24px;
+  border-radius: 2.4rem;
 }
 @media screen and (min-width: 768px) {
   pn-stats-info[data-stats-image=background] .pn-stats-info__container__content {
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-    max-width: 540px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    max-width: 54rem;
     background-position: -999px -999px;
     background-size: 0;
-    padding-bottom: 4rem;
-    padding-right: 4rem;
   }
 }
 @media screen and (min-width: 1200px) {
   pn-stats-info[data-stats-image=background] .pn-stats-info__container__content {
     max-width: 100%;
-    padding-bottom: 6rem;
-    padding-right: 6rem;
   }
 }
 pn-stats-info[data-stats-image=background] .pn-stats-info__container__content__data {
   min-height: 0;
 }
-pn-stats-info[data-stats-image=background] .pn-stats-info__container__content__data .pn-stats-info-data__container {
-  justify-content: flex-start;
-}
 
 pn-stats-info[data-stats-image=image] .pn-stats-info__container {
   flex-direction: column;
@@ -142,37 +163,39 @@ pn-stats-info[data-stats-image=image] .pn-stats-info-image-container {
   position: relative;
 }
 pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration] {
-  border-top-left-radius: 24px;
-  border-top-right-radius: 24px;
+  border-top-left-radius: 2.4rem;
+  border-top-right-radius: 2.4rem;
 }
 pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration] > picture > img {
   width: 100%;
   height: auto;
-  border-top-left-radius: 24px;
-  border-top-right-radius: 24px;
+  border-top-left-radius: 2.4rem;
+  border-top-right-radius: 2.4rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 @media screen and (min-width: 992px) {
   pn-stats-info[data-stats-image=image] .pn-stats-info-image-container {
     display: flex;
     align-items: center;
     background-color: #0D234B;
-    padding-left: 40px;
-    border-top-left-radius: 24px;
-    border-bottom-left-radius: 24px;
+    padding-left: 4rem;
+    border-top-left-radius: 2.4rem;
+    border-bottom-left-radius: 2.4rem;
   }
   pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration] img {
     clip-path: circle(50%);
     object-fit: cover;
     object-position: center;
     aspect-ratio: 1;
-    max-width: 450px;
+    max-width: 45rem;
   }
 }
 pn-stats-info[data-stats-image=image] .pn-stats-info__container__content {
   width: 100%;
   max-width: 100%;
-  border-bottom-right-radius: 24px;
-  border-bottom-left-radius: 24px;
+  border-bottom-right-radius: 2.4rem;
+  border-bottom-left-radius: 2.4rem;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }
@@ -183,10 +206,9 @@ pn-stats-info[data-stats-image=image] .pn-stats-info__container__content {
 }
 @media screen and (min-width: 992px) {
   pn-stats-info[data-stats-image=image] .pn-stats-info__container__content {
-    border-top-right-radius: 24px;
-    border-bottom-right-radius: 24px;
+    border-top-right-radius: 2.4rem;
+    border-bottom-right-radius: 2.4rem;
     border-bottom-left-radius: 0;
-    padding: 50px 25px;
     max-width: 100%;
   }
 }
@@ -202,17 +224,17 @@ pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data {
 }
 pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container {
   justify-content: flex-start;
-  min-height: 56px;
+  min-height: 5.6rem;
 }
 @media screen and (min-width: 768px) {
   pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container {
-    min-height: 56px;
+    min-height: 5.6rem;
     padding: 2.4rem;
   }
 }
 @media screen and (min-width: 1200px) {
   pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container {
-    min-height: 50px;
+    min-height: 5rem;
   }
 }
 @media screen and (min-width: 992px) {
@@ -293,7 +315,7 @@ pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .
 }
 @media screen and (min-width: 768px) {
   .comboquotestatsblock pn-stats-info .pn-stats-info__container__content {
-    max-width: 540px;
+    max-width: 54rem;
     background-position: -999px -999px;
     background-size: 0;
     padding-bottom: 4rem;

package/collection/components/data-visualization/pn-stats-info/pn-stats-info.js

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-const mockStringArray = '[ { "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 }, { "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 },{"preamble": "carbon dioxide emissions since 2009", "data": -44, "unit": "%", "duration": 2000 }, { "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 }]';
+const mockStringArray = '[ { "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 }, { "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 },{"preamble": "carbon dioxide emissions since 2009", "data": -44, "unit": "%", "duration": 2000 }, { "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 }, {"preamble": "carbon dioxide emissions since 2009", "data": -44, "unit": "%", "duration": 2000 }, { "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 }]';
 export class PnStatsInfo {
   constructor() {
     this.heading = 'Heading';
@@ -11,13 +11,10 @@ export class PnStatsInfo {
     if (newValue)
       this.myParsedArray = JSON.parse(newValue);
   }
-  generateUniqueID() {
-    return Date.now();
-  }
   render() {
     return (h(Host, null, h("div", { class: "pn-stats-info__container" }, h("div", { class: "pn-stats-info__container__map", style: { backgroundImage: `url(${this.backgroundUrl})` } }), h("div", { class: "pn-stats-info-image-container" }, h("slot", { name: "illustration" })), h("div", { class: "pn-stats-info__container__content", style: { backgroundImage: `url(${this.backgroundUrl})` } }, h("h3", { class: "pn-stats-info__container__content__heading" }, this.heading), h("div", { class: "pn-stats-info__container__content__data" }, this.myParsedArray &&
       this.myParsedArray.map((stats, index) => {
-        return (h("pn-stats-info-data", { "comp-id": `${this.generateUniqueID()}-${index}`, data: stats.data, unit: stats.unit, preamble: stats.preamble, duration: stats.duration }));
+        return h("pn-stats-info-data", { index: index, data: stats.data, unit: stats.unit, preamble: stats.preamble, duration: stats.duration });
       }))))));
   }
   static get is() { return "pn-stats-info"; }