@postnord/pn-marketweb-components 2.0.120 → 2.0.121

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

@@ -0,0 +1,75 @@
+import readme from './readme.md';
+
+export default {
+  title: 'Charts/Charts Card',
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+  },
+};
+
+const TemplateChartsCardOne = ({ ...args }) => {
+  return `
+  <pn-breakpoints></pn-breakpoints>
+  <div style="width:100%; display:flex; flex-direction:row; gap:16px;">
+     <div class="onethirdwidth" style="width:33%; padding:16px 0;">                 
+        <pn-charts-card 
+          header="${args.header}" 
+          highlight="${args.highlight}" 
+          preamble="${args.preamble}" 
+          label="${args.label}"
+          source="${args.source}"
+          source-url="${args.sourceUrl}"
+          open-in-new-window="${args.openInNewWindow}"
+          data-chart-color="blue"
+        >
+            <pn-chart data-chart-type="doughnut" slot="chart" labels='["XSmall", "Small", "Medium"]' data-sets='[{ "label": "# of packages in billions", "backgroundColor": ["#E0F8FF", "#8EDDF9", "#00A0D6"], "data": [50, 100, 500] }]'></pn-chart>
+           
+        </pn-charts-card>
+      </div>
+   
+    <div class="onethirdwidth" style="width:33%; padding:16px 0;">      
+    <pn-charts-card 
+          header="${args.header}" 
+          highlight="${args.highlight}" 
+          preamble="${args.preamble}" 
+          label="${args.label}"
+          source="${args.source}"
+          source-url="${args.sourceUrl}"
+          open-in-new-window="${args.openInNewWindow}"
+           data-chart-color="green"
+        >
+            <pn-chart data-chart-type="bar" slot="chart" labels='["Large", "XLarge", "XXLarge"]' data-sets='[{ "label": "# of packages in billions", "backgroundColor": ["#E0F8FF", "#8EDDF9", "#00A0D6"], "data": [250, 100, 50] }]'></pn-chart>
+
+      </pn-charts-card>
+      </div>
+
+    <div class="onethirdwidth" style="width:33%; padding:16px 0;">      
+    <pn-charts-card 
+          header="${args.header}" 
+          highlight="${args.highlight}" 
+          preamble="${args.preamble}" 
+          label="${args.label}"
+          source="${args.source}"
+          source-url="${args.sourceUrl}"
+          open-in-new-window="${args.openInNewWindow}"
+        >
+          <pn-chart data-chart-type="line" slot="chart" labels='["Jan", "Feb", "Mars"]' data-sets='[{ "label": "# of packages in billions", "backgroundColor": ["#E0F8FF", "#8EDDF9", "#00A0D6"], "data": [300, 600, 50] }, { "label": "c02 emission", "borderColor":"green", "fill":true, "backgroundColor": ["#E0F8FF", "#8EDDF9", "#00A0D6"], "data": [20, 50, 90] }]'></pn-chart>
+      </pn-charts-card>
+      </div>  
+ </div>
+
+    `;
+};
+
+export const ChartsCard = TemplateChartsCardOne.bind({});
+
+ChartsCard.args = {
+  header: 'The e-commerce grows in all areas',
+  highlight: '10%',
+  preamble: 'In Q3 we have seen a big growth in e-com.',
+  label: 'Stats taken from',
+  source: 'E-commerce in Europe 2021',
+  sourceUrl: '/',
+  openInNewWindow: false,
+};

package/custom-elements/index.d.ts

@@ -20,6 +20,18 @@ export const PnBreakpoints: {
   new (): PnBreakpoints;
 };
 
+interface PnChart extends Components.PnChart, HTMLElement {}
+export const PnChart: {
+  prototype: PnChart;
+  new (): PnChart;
+};
+
+interface PnChartsCard extends Components.PnChartsCard, HTMLElement {}
+export const PnChartsCard: {
+  prototype: PnChartsCard;
+  new (): PnChartsCard;
+};
+
 interface PnChoiceButton extends Components.PnChoiceButton, HTMLElement {}
 export const PnChoiceButton: {
   prototype: PnChoiceButton;