npm - @mozaic-ds/web-components - Versions diffs - 0.8.0 → 0.9.0 - Mend

@mozaic-ds/web-components 0.8.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (76) hide show

package/public/bricoman/components/kpi/Kpi.svelte ADDED Viewed

@@ -0,0 +1,232 @@
+<svelte:options tag={null} />
+<script lang="ts">
+  export let value: string = '';
+  export let iconname: string = '';
+  export let iconcolor: string = '';
+  export let label: string = '';
+  export let type: string = '';
+  export let detail: string = '';
+  $: labelOutsideContent = label && label.length > 0 && size() !== 'large';
+  $: size = function getSize() {
+    let size = 'small';
+    if (label && label.length > 0 && !detail) {
+      size = 'medium';
+    } else if (detail && detail.length > 0) {
+      size = 'large';
+    }
+    return size;
+  };
+  function generateIconName(iconname: string, iconcolor?: string): string {
+    return iconcolor ? `${iconname}  fill="${iconcolor}"` : `${iconname}`;
+  }
+</script>
+<div class="mc-kpi mc-kpi--{size()} mc-kpi--{type}">
+  {#if labelOutsideContent}
+    <span class="mc-kpi__label">{label}</span>
+  {/if}
+  <div class="mc-kpi__content">
+    <div class="mc-kpi__main">
+      {#if !labelOutsideContent}
+        <span class="mc-kpi__label">{label}</span>
+      {/if}
+      <span class="mc-kpi__value">{value}</span>
+    </div>
+    {#if iconname || detail}
+      <div class="mc-kpi__aside">
+        {#if detail}
+          <span class="mc-kpi__detail">{detail}</span>
+        {/if}
+        {#if iconname}
+          <span class="mc-kpi__icon"
+            >{@html `<${generateIconName(iconname, iconcolor)} />`}</span
+          >
+        {/if}
+      </div>
+    {/if}
+  </div>
+</div>
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  .mc-kpi {
+    color: var(--color-kpi-text, #005c91);
+    display: inline-block;
+    &__label {
+      font-size: 1.2rem;
+      display: block;
+    }
+    &__content {
+      display: flex;
+    }
+    &__main {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
+    &__value {
+      font-size: 1.2rem;
+      font-weight: 600;
+    }
+    &__aside {
+      align-items: center;
+      background-color: var(--color-grey-000, #ffffff);
+      color: var(--color-font-dark, #000000);
+      display: flex;
+      justify-content: center;
+    }
+    &__detail {
+      font-size: 1.2rem;
+    }
+    &__icon {
+      display: block;
+      height: 16px;
+      width: 16px;
+    }
+    &--small {
+      .mc-kpi {
+        &__label {
+          font-size: 1rem;
+          margin-bottom: 6px;
+          color: var(--color-grey-999, #999999);
+        }
+        &__content {
+          gap: 0.5rem;
+        }
+        &__value {
+          font-size: 0.875rem;
+          line-height: 1.2;
+        }
+        &__main {
+          background-color: var(--color-kpi-background, #daeff7);
+          border: 1px solid var(--color-kpi-border, #007bb4);
+          border-radius: 4px;
+          overflow: hidden;
+          padding: 3px 7px;
+        }
+        &__aside {
+          background-color: transparent;
+        }
+      }
+    }
+    &--medium {
+      .mc-kpi {
+        &__label {
+          color: var(--color-grey-999, #999999);
+          margin-bottom: 6px;
+        }
+        &__content {
+          background-color: var(--color-kpi-background, #daeff7);
+          border: 1px solid var(--color-kpi-border, #007bb4);
+          border-radius: 4px;
+          overflow: hidden;
+          height: 40px;
+          min-width: 160px;
+        }
+        &__main {
+          flex-grow: 1;
+          padding: 2px 2px 2px 7px;
+        }
+        &__value {
+          font-size: 1.5rem;
+        }
+        &__aside {
+          padding-left: 12px;
+          padding-right: 15px;
+        }
+      }
+    }
+    &--large {
+      background-color: var(--color-kpi-background, #daeff7);
+      border: 1px solid var(--color-kpi-border, #007bb4);
+      border-radius: 4px;
+      overflow: hidden;
+      .mc-kpi {
+        &__content {
+          flex-direction: column;
+          min-width: 160px;
+          min-height: 100px;
+        }
+        &__main {
+          flex-direction: column;
+          padding: 10px 15px;
+          min-height: 5rem;
+        }
+        &__label {
+          line-height: 1.5;
+          font-size: 1rem;
+        }
+        &__value {
+          font-size: 2rem;
+        }
+        &__detail {
+          font-size: 1rem;
+          line-height: 1;
+        }
+        &__aside {
+          min-height: 3rem;
+          padding-right: 15px;
+          padding-left: 15px;
+          gap: 12px;
+        }
+      }
+    }
+    &--information {
+      --color-kpi-background: #daeff7;
+      --color-kpi-border: #007bb4;
+      --color-kpi-text: #005c91;
+    }
+    &--warning {
+      --color-kpi-background: #fdf1e8;
+      --color-kpi-border: #c65200;
+      --color-kpi-text: #8c3500;
+    }
+    &--danger {
+      --color-kpi-background: #fdeaea;
+      --color-kpi-border: #c61112;
+      --color-kpi-text: #8c0003;
+    }
+    &--success {
+      --color-kpi-background: #ebf5de;
+      --color-kpi-border: #188803;
+      --color-kpi-text: #006902;
+    }
+    &--neutral {
+      --color-kpi-background: #e6e6e6;
+      --color-kpi-border: #666666;
+      --color-kpi-text: #4d4d4d;
+    }
+  }
+</style>

package/public/bricoman/icons-storybook.js CHANGED Viewed

@@ -13,6 +13,22 @@ import ArrowArrowRight24 from './icons/ArrowArrowRight24.js';
 import DisplayHome24 from './icons/DisplayHome24.js';
 import DisplayBlink24 from './icons/DisplayBlink24.js';
 import AspectQuantity24 from './icons/AspectQuantity24.js';
+import ArrowArrowTopRight16 from './icons/ArrowArrowTopRight16.js';
+import ArrowArrowBottomRight16 from './icons/ArrowArrowBottomRight16.js';
+if (!customElements.get('navigation-arrow-arrowtopright-16px')) {
+  customElements.define(
+    'navigation-arrow-arrowtopright-16px',
+    ArrowArrowTopRight16,
+  );
+}
+if (!customElements.get('navigation-arrow-arrowbottomright-16px')) {
+  customElements.define(
+    'navigation-arrow-arrowbottomright-16px',
+    ArrowArrowBottomRight16,
+  );
+}
 if (!customElements.get('navigation-arrow-arrow--left-32px')) {
   customElements.define('navigation-arrow-arrow--left-32px', ArrowArrowLeft32);

package/public/bricoman/main.d.ts CHANGED Viewed

@@ -49,6 +49,7 @@ declare const _default: {
     Radar: typeof Accordion;
     Header: typeof Accordion;
     TagList: typeof Accordion;
+    Kpi: typeof Accordion;
 };
 export default _default;
 //# sourceMappingURL=main.d.ts.map

package/public/bricoman/main.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/main.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;~~AA+ChE~~,YAAY,EACV,OAAO,IAAI,WAAW,EACtB,OAAO,EACP,YAAY,EACZ,OAAO,EACP,IAAI,GACL,MAAM,oCAAoC,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAG5C,~~wBAiDE~~"}
1	+ {"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/main.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAgDhE,YAAY,EACV,OAAO,IAAI,WAAW,EACtB,OAAO,EACP,YAAY,EACZ,OAAO,EACP,IAAI,GACL,MAAM,oCAAoC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAG5C,wBAkDE"}

package/public/bricoman/utilities/DataTableUtilities.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableUtilities.d.ts","sourceRoot":"","sources":["../../../src/utilities/DataTableUtilities.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,QAAQ,EAIR,QAAQ,EACR,aAAa,EACb,WAAW,EAEX,eAAe,EAGhB,MAAM,yCAAyC,CAAC;~~AAqFjD~~,eAAO,MAAM,cAAc,aACf,QAAQ,YACR,QAAQ,KACjB,MAMF,CAAC;AAEF,eAAO,MAAM,gBAAgB,oBACV,MAAM,GAAG,SAAS,SAC5B,MAAM;;CAQd,CAAC;AACF,eAAO,MAAM,mBAAmB,UAAW,QAAQ,EAAE,KAAG,OASvD,CAAC;AACF,eAAO,MAAM,WAAW,UAAW,QAAQ,EAAE,KAAG,OAQ/C,CAAC;AAEF,eAAO,MAAM,gBAAgB,yBACL,aAAa,KAClC,aAaF,CAAC;AAEF,eAAO,MAAM,WAAW,UACf,QAAQ,EAAE,YACP,MAAM,eACH,WAAW,iBACT,aAAa,KAC3B,QAAQ,EA8DV,CAAC;AAEF,eAAO,MAAM,yBAAyB,eACxB,MAAM,eACL,MAAM,gBACL,OAAO,KACpB,MAAM,EAmBR,CAAC;AAEF,eAAO,MAAM,wBAAwB,SAC7B,QAAQ,mBACG,eAAe,GAAG,SAAS,sBACxB,OAAO,KAC1B,eAAe,GAAG,SAyCpB,CAAC;AAEF,eAAO,MAAM,uBAAuB,UAC3B,QAAQ,EAAE,mBACA,eAAe,GAAG,SAAS,sBACxB,OAAO,iBACZ,OAAO,YACZ,OAAO,KAChB,eAAe,GAAG,SAwFpB,CAAC;AAEF,eAAO,MAAM,cAAc,oBACR,eAAe,GAAG,SAAS,KAC3C,eAAe,GAAG,SAOpB,CAAC;AAEF,eAAO,MAAM,SAAS,oBACH,eAAe,GAAG,SAAS,KAC3C,eAAe,GAAG,SAOpB,CAAC;AAEF,eAAO,MAAM,mCAAmC,UACvC,QAAQ,EAAE,mBACA,eAAe,GAAG,SAAS,iBAC7B,OAAO,KACrB,OA4BF,CAAC;AAEF,oBAAY,aAAa;IACvB,KAAK,UAAU;CAChB"}
1	+ {"version":3,"file":"DataTableUtilities.d.ts","sourceRoot":"","sources":["../../../src/utilities/DataTableUtilities.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,QAAQ,EAIR,QAAQ,EACR,aAAa,EACb,WAAW,EAEX,eAAe,EAGhB,MAAM,yCAAyC,CAAC;AA6FjD,eAAO,MAAM,cAAc,aACf,QAAQ,YACR,QAAQ,KACjB,MAMF,CAAC;AAEF,eAAO,MAAM,gBAAgB,oBACV,MAAM,GAAG,SAAS,SAC5B,MAAM;;CAQd,CAAC;AACF,eAAO,MAAM,mBAAmB,UAAW,QAAQ,EAAE,KAAG,OASvD,CAAC;AACF,eAAO,MAAM,WAAW,UAAW,QAAQ,EAAE,KAAG,OAQ/C,CAAC;AAEF,eAAO,MAAM,gBAAgB,yBACL,aAAa,KAClC,aAaF,CAAC;AAEF,eAAO,MAAM,WAAW,UACf,QAAQ,EAAE,YACP,MAAM,eACH,WAAW,iBACT,aAAa,KAC3B,QAAQ,EA8DV,CAAC;AAEF,eAAO,MAAM,yBAAyB,eACxB,MAAM,eACL,MAAM,gBACL,OAAO,KACpB,MAAM,EAmBR,CAAC;AAEF,eAAO,MAAM,wBAAwB,SAC7B,QAAQ,mBACG,eAAe,GAAG,SAAS,sBACxB,OAAO,KAC1B,eAAe,GAAG,SAyCpB,CAAC;AAEF,eAAO,MAAM,uBAAuB,UAC3B,QAAQ,EAAE,mBACA,eAAe,GAAG,SAAS,sBACxB,OAAO,iBACZ,OAAO,YACZ,OAAO,KAChB,eAAe,GAAG,SAwFpB,CAAC;AAEF,eAAO,MAAM,cAAc,oBACR,eAAe,GAAG,SAAS,KAC3C,eAAe,GAAG,SAOpB,CAAC;AAEF,eAAO,MAAM,SAAS,oBACH,eAAe,GAAG,SAAS,KAC3C,eAAe,GAAG,SAOpB,CAAC;AAEF,eAAO,MAAM,mCAAmC,UACvC,QAAQ,EAAE,mBACA,eAAe,GAAG,SAAS,iBAC7B,OAAO,KACrB,OA4BF,CAAC;AAEF,oBAAY,aAAa;IACvB,KAAK,UAAU;CAChB"}

package/public/bricoman/utilities/DataTableUtilities.ts CHANGED Viewed

@@ -23,6 +23,12 @@ const customTextFormatter = (customText: CustomText): string => {
   );
   return customTextHtml;
 };
+const customNumberFormatter = (number: Number): string => {
+  return `<span style="display: flex; justify-content: end;" > ${String(
+    number,
+  )} </span>`;
+};
 const imageFormatter = (image: Image): string =>
   `<img style="${
     image.style || 'width: 35px; height: 35px; margin-right: 8px;'
@@ -77,6 +83,8 @@ const getFormattedCell = (
       return cellValue as string;
     case 'CustomText':
       return customTextFormatter(cellValue as CustomText);
+    case 'Number':
+      return customNumberFormatter(cellValue as Number);
     case 'Image':
       return imageFormatter(cellValue as Image);
     case 'Badge':
@@ -102,7 +110,7 @@ export const getCellContent = (
 ): string => {
   const cellValue = bodyData?.cells[headData.id];
-  return cellValue
+  return cellValue || Number(cellValue) === 0
     ? getFormattedCell(headData.cellsFormat, cellValue, bodyData.id)
     : '';
 };

package/public/bundle.js CHANGED Viewed

@@ -48,6 +48,7 @@ import Sidebar from './components/sidebar/Sidebar.js';
 import OptionButton from './components/optionbutton/OptionButton.js';
 import Header from './components/header/Header.js';
 import TagList from './components/taglist/TagList.js';
+import Kpi from './components/kpi/Kpi.js';
 if (!customElements.get('m-accordion')) {
   customElements.define('m-accordion', Accordion);
@@ -247,3 +248,7 @@ if (!customElements.get('m-header')) {
 if (!customElements.get('m-taglist')) {
   customElements.define('m-taglist', TagList);
 }
+if (!customElements.get('m-kpi')) {
+  customElements.define('m-kpi', Kpi);
+}

package/public/components/barchart/BarChart.svelte CHANGED Viewed

@@ -140,6 +140,7 @@
         const { left, top, width } = (
           e.target as HTMLElement
         ).getBoundingClientRect();
+        console.log(xSubgroup.bandwidth());
         tooltipData = {
           show: true,
           text: chartEvent.customtooltip
@@ -271,16 +272,14 @@
 </script>
 <div bind:this={chart} style="background-color: {backgroundcolor};" />
-{#if tooltipData.show}
+{#if true}
   <div
     class="tooltip"
-    style={`top: ${tooltipData.top}px; left: ${tooltipData.left}px; width: ${tooltipData.width}px;`}
+    style={`top: ${tooltipData.top}px; left: ${tooltipData.left}px;`}
   >
     {tooltipData.text}
   </div>
 {/if}
 <div style="height: 0; width: 0;" class="pattern">
   {#each parsedSvgs as svg}
     {@html svg}
@@ -297,7 +296,7 @@
     border-radius: 4px;
     color: $color-grey-000;
     text-align: center;
-    padding: magic-unit-rem(0.5) 0;
+    padding: $mu050 $mu100;
     position: absolute;
   }

package/public/components/chart/BarChart.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{S as t,i as e,a as r,b as s,f as a,s as o,e as i,d as n,T as c,n as l,y as u,g as d,o as m,J as h,a1 as g,t as f,j as p,k as $,K as x,v as b,Z as k}from"../../index-c33b3772.js";import{s as y}from"../../transform-15d69d5d.js";import{E as v}from"../../EventHandler-02058705.js";import{a as w,b as A}from"../../axis-fbc0f7b5.js";import{b as N}from"../../band-d7a07d2c.js";import{l as S}from"../../linear-f46d7e9e.js";function j(t,e,r){const s=t.slice();return s[4]=e[r],s}function E(t){let e,r,a,o=t[2].text+"";return{c(){e=i("div"),r=f(o),d(e,"class","tooltip"),d(e,"style",a=`top: ${t[2].top}px; left: ${t[2].left}px; width: ${t[2].width}px;`)},m(t,a){s(t,e,a),p(e,r)},p(t,s){4&s[0]&&o!==(o=t[2].text+"")&&$(r,o),4&s[0]&&a!==(a=`top: ${t[2].top}px; left: ${t[2].left}px; width: ${t[2].width}px;`)&&d(e,"style",a)},d(t){t&&m(e)}}}function C(t){let e,r,a=t[4]+"";return{c(){e=new k(!1),r=x(),e.a=r},m(t,o){e.m(a,t,o),s(t,r,o)},p(t,r){8&r[0]&&a!==(a=t[4]+"")&&e.p(a)},d(t){t&&m(r),t&&e.d()}}}function O(t){let e,r,a,o,g,f,p=t[2].show&&E(t),$=t[3],x=[];for(let e=0;e<$.length;e+=1)x[e]=C(j(t,$,e));return{c(){e=i("div"),r=n(),p&&p.c(),a=n(),o=i("div");for(let t=0;t<x.length;t+=1)x[t].c();g=n(),f=c("text"),this.c=l,u(e,"background-color",t[0]),u(o,"height","0"),u(o,"width","0"),d(o,"class","pattern")},m(i,n){s(i,e,n),t[18](e),s(i,r,n),p&&p.m(i,n),s(i,a,n),s(i,o,n);for(let t=0;t<x.length;t+=1)x[t]&&x[t].m(o,null);s(i,g,n),s(i,f,n)},p(t,r){if(1&r[0]&&u(e,"background-color",t[0]),t[2].show?p?p.p(t,r):(p=E(t),p.c(),p.m(a.parentNode,a)):p&&(p.d(1),p=null),8&r[0]){let e;for($=t[3],e=0;e<$.length;e+=1){const s=j(t,$,e);x[e]?x[e].p(s,r):(x[e]=C(s),x[e].c(),x[e].m(o,null))}for(;e<x.length;e+=1)x[e].d(1);x.length=$.length}},i:l,o:l,d(s){s&&m(e),t[18](null),s&&m(r),p&&p.d(s),s&&m(a),s&&m(o),h(x,s),s&&m(g),s&&m(f)}}}function J(t){return t?JSON.parse(t):{top:10,right:40,bottom:20,left:60,xAxis:20}}function R(t,e,r){let s,a,o,i,n,{data:c=""}=e,{chartheight:l="300"}=e,{backgroundcolor:u="#fff"}=e,{scalemax:d=50}=e,{scalemin:m=0}=e,{color:h="#0B96CC"}=e,{ticknumbers:f=4}=e,{tickleftformat:p}=e;p=t=>`${t}`;let $,x,k,{tickbottomformat:j=(t=>`${t}`)}=e,{svgs:E}=e,{margins:C}=e,O=!1,R={show:!1,text:"",top:0,left:0,width:0},z=new v;function F(){let t=y(x).style("width");return""!==t&&t||(t=""+window.innerWidth/2),parseInt(t)}function q(t){return n.map((e=>({key:e,value:t[e].value,customtooltip:t[e].customtooltip})))}function B(t){const e=N().domain(s).range([0,t-(J(C).left/2+J(C).right/2)]).padding(.2),r=S().domain([m,d]).range([a,0]),o=N().domain(n).range([0,e.bandwidth()]).padding(.05);return{x:e,y:r,xSubgroup:o}}function I(t,e,s){k.append("g").selectAll("g").data(i).join("g").attr("transform",(e=>`translate(${String(t(e.group))}, 0)`)).attr("class","bar").selectAll("rect").data((t=>q(t))).join("rect").attr("x",(t=>e(t.key))).attr("y",(()=>s(0))).attr("width",e.bandwidth()).attr("height",(()=>a-s(0))).style("fill",(()=>h)).style("cursor","pointer").on("mouseout",((t,e)=>{k.selectAll("rect").filter((function(t){return t!=e})).style("opacity",1),r(2,R.show=!1,R)})).on("mouseover",((t,e)=>{k.selectAll("rect").filter((function(t){return t!=e})).style("opacity",.7);const{left:s,top:a,width:o}=t.target.getBoundingClientRect();r(2,R={show:!0,text:e.customtooltip?`${e.customtooltip}`:`${e.key} - ${e.value}`,left:s,top:a-50,width:o})})).on("click",((t,e)=>{z.dispatch("bar-clicked",e)})),k.selectAll("rect").transition().duration(800).attr("y",(t=>+t.value<0?s(0):s(+t.value))).attr("height",(t=>+t.value<0?s(+t.value)-s(0):a-s(+t.value+Number(m)))).delay(((t,e)=>100*e))}function D(t,e){k.select(".x-axis").call(w(t).tickFormat(j)),k.select(".y-axis").call(A(e).ticks(f).tickFormat(p));const r=F();k.selectAll(".y-axis .tick line").attr("stroke","#EEEDEA").attr("stroke-width","1px").attr("x2",r)}function H(){var t;if($){const e=F();null===(t=x.querySelector("#svg-chart"))||void 0===t||t.setAttribute("width",`${e}px`);const{x:r,y:s,xSubgroup:a}=B(e);D(r,s),k.selectAll(".bar").data(i).attr("transform",(t=>`translate(${Number(r(t.group))}, 0)`)).selectAll("rect").data((t=>q(t))).attr("x",(t=>a(t.key))).attr("width",a.bandwidth())}}return g((()=>{new ResizeObserver(H).observe(x),r(17,O=!0)})),t.$$set=t=>{"data"in t&&r(6,c=t.data),"chartheight"in t&&r(7,l=t.chartheight),"backgroundcolor"in t&&r(0,u=t.backgroundcolor),"scalemax"in t&&r(8,d=t.scalemax),"scalemin"in t&&r(9,m=t.scalemin),"color"in t&&r(10,h=t.color),"ticknumbers"in t&&r(11,f=t.ticknumbers),"tickleftformat"in t&&r(5,p=t.tickleftformat),"tickbottomformat"in t&&r(12,j=t.tickbottomformat),"svgs"in t&&r(13,E=t.svgs),"margins"in t&&r(14,C=t.margins)},t.$$.update=()=>{64&t.$$.dirty[0]&&r(15,i=c?JSON.parse(c):[]),32768&t.$$.dirty[0]&&(s=i.map((t=>t.group))),32768&t.$$.dirty[0]&&(n=i[0]?Object.keys(i[0]).filter((t=>"group"!==t)):[]),128&t.$$.dirty[0]&&(a=parseInt(l,10)),8192&t.$$.dirty[0]&&r(3,o=E?JSON.parse(E):[]),196672&t.$$.dirty[0]&&c.length>0&&O&&($?c!==$&&(!function(){var t;const e=F();null===(t=x.querySelector("#svg-chart"))||void 0===t||t.setAttribute("width",`${e}px`);const{x:r,y:s,xSubgroup:a}=B(e);D(r,s),k.selectAll(".bar").remove(),I(r,a,s)}(),r(16,$=c)):(!function(){const t=F(),{x:e,y:s,xSubgroup:o}=B(t);r(4,k=y(x).append("svg").attr("width",t).attr("height",Number(a)+Number(J(C).top)+Number(J(C).bottom)+Number(J(C).xAxis)).attr("id","svg-chart").append("g").attr("transform",`translate(${J(C).left/2+J(C).right/2},${J(C).top})`)),k.append("g").attr("transform",`translate(0, ${Number(a)+Number(J(C).xAxis)})`).call(w(e)).attr("class","x-axis").attr("stroke-width","0"),k.append("g").call(A(s).ticks(f).tickFormat(p)).attr("class","y-axis").attr("stroke-width","0"),I(e,o,s)}(),r(16,$=c)))},[u,x,R,o,k,p,c,l,d,m,h,f,j,E,C,i,$,O,function(t){b[t?"unshift":"push"]((()=>{x=t,r(1,x)}))}]}class z extends t{constructor(t){super();const i=document.createElement("style");i.textContent='.tooltip{height:auto;background-color:#4d4d4d;border-radius:4px;color:#ffffff;text-align:center;padding:0.5rem 0;position:absolute}.pattern{z-index:-1;position:relative}text{font-family:"LeroyMerlin", sans-serif;font-size:0.875rem;color:#4d4d4d}',this.shadowRoot.appendChild(i),e(this,{target:this.shadowRoot,props:r(this.attributes),customElement:!0},R,O,o,{data:6,chartheight:7,backgroundcolor:0,scalemax:8,scalemin:9,color:10,ticknumbers:11,tickleftformat:5,tickbottomformat:12,svgs:13,margins:14},null,[-1,-1]),t&&(t.target&&s(t.target,this,t.anchor),t.props&&(this.$set(t.props),a()))}static get observedAttributes(){return["data","chartheight","backgroundcolor","scalemax","scalemin","color","ticknumbers","tickleftformat","tickbottomformat","svgs","margins"]}get data(){return this.$$.ctx[6]}set data(t){this.$$set({data:t}),a()}get chartheight(){return this.$$.ctx[7]}set chartheight(t){this.$$set({chartheight:t}),a()}get backgroundcolor(){return this.$$.ctx[0]}set backgroundcolor(t){this.$$set({backgroundcolor:t}),a()}get scalemax(){return this.$$.ctx[8]}set scalemax(t){this.$$set({scalemax:t}),a()}get scalemin(){return this.$$.ctx[9]}set scalemin(t){this.$$set({scalemin:t}),a()}get color(){return this.$$.ctx[10]}set color(t){this.$$set({color:t}),a()}get ticknumbers(){return this.$$.ctx[11]}set ticknumbers(t){this.$$set({ticknumbers:t}),a()}get tickleftformat(){return this.$$.ctx[5]}set tickleftformat(t){this.$$set({tickleftformat:t}),a()}get tickbottomformat(){return this.$$.ctx[12]}set tickbottomformat(t){this.$$set({tickbottomformat:t}),a()}get svgs(){return this.$$.ctx[13]}set svgs(t){this.$$set({svgs:t}),a()}get margins(){return this.$$.ctx[14]}set margins(t){this.$$set({margins:t}),a()}}export{z as default};
+import{S as t,i as e,a as r,b as s,f as a,s as o,e as i,d as n,T as c,n as l,y as u,g as m,o as d,J as h,a1 as g,t as f,j as p,k as $,K as b,v as x,Z as k}from"../../index-c33b3772.js";import{s as y}from"../../transform-15d69d5d.js";import{E as v}from"../../EventHandler-02058705.js";import{a as w,b as A}from"../../axis-fbc0f7b5.js";import{b as N}from"../../band-d7a07d2c.js";import{l as S}from"../../linear-f46d7e9e.js";function j(t,e,r){const s=t.slice();return s[4]=e[r],s}function E(t){let e,r,a=t[4]+"";return{c(){e=new k(!1),r=b(),e.a=r},m(t,o){e.m(a,t,o),s(t,r,o)},p(t,r){8&r[0]&&a!==(a=t[4]+"")&&e.p(a)},d(t){t&&d(r),t&&e.d()}}}function C(t){let e,r,a,o,g,b,x=function(t){let e,r,a,o=t[2].text+"";return{c(){e=i("div"),r=f(o),m(e,"class","tooltip"),m(e,"style",a=`top: ${t[2].top}px; left: ${t[2].left}px;`)},m(t,a){s(t,e,a),p(e,r)},p(t,s){4&s[0]&&o!==(o=t[2].text+"")&&$(r,o),4&s[0]&&a!==(a=`top: ${t[2].top}px; left: ${t[2].left}px;`)&&m(e,"style",a)},d(t){t&&d(e)}}}(t),k=t[3],y=[];for(let e=0;e<k.length;e+=1)y[e]=E(j(t,k,e));return{c(){e=i("div"),r=n(),x&&x.c(),a=n(),o=i("div");for(let t=0;t<y.length;t+=1)y[t].c();g=n(),b=c("text"),this.c=l,u(e,"background-color",t[0]),u(o,"height","0"),u(o,"width","0"),m(o,"class","pattern")},m(i,n){s(i,e,n),t[18](e),s(i,r,n),x&&x.m(i,n),s(i,a,n),s(i,o,n);for(let t=0;t<y.length;t+=1)y[t]&&y[t].m(o,null);s(i,g,n),s(i,b,n)},p(t,r){if(1&r[0]&&u(e,"background-color",t[0]),x.p(t,r),8&r[0]){let e;for(k=t[3],e=0;e<k.length;e+=1){const s=j(t,k,e);y[e]?y[e].p(s,r):(y[e]=E(s),y[e].c(),y[e].m(o,null))}for(;e<y.length;e+=1)y[e].d(1);y.length=k.length}},i:l,o:l,d(s){s&&d(e),t[18](null),s&&d(r),x&&x.d(s),s&&d(a),s&&d(o),h(y,s),s&&d(g),s&&d(b)}}}function O(t){return t?JSON.parse(t):{top:10,right:40,bottom:20,left:60,xAxis:20}}function J(t,e,r){let s,a,o,i,n,{data:c=""}=e,{chartheight:l="300"}=e,{backgroundcolor:u="#fff"}=e,{scalemax:m=50}=e,{scalemin:d=0}=e,{color:h="#0B96CC"}=e,{ticknumbers:f=4}=e,{tickleftformat:p}=e;p=t=>`${t}`;let $,b,k,{tickbottomformat:j=(t=>`${t}`)}=e,{svgs:E}=e,{margins:C}=e,J=!1,R={show:!1,text:"",top:0,left:0,width:0},z=new v;function F(){let t=y(b).style("width");return""!==t&&t||(t=""+window.innerWidth/2),parseInt(t)}function q(t){return n.map((e=>({key:e,value:t[e].value,customtooltip:t[e].customtooltip})))}function B(t){const e=N().domain(s).range([0,t-(O(C).left/2+O(C).right/2)]).padding(.2),r=S().domain([d,m]).range([a,0]),o=N().domain(n).range([0,e.bandwidth()]).padding(.05);return{x:e,y:r,xSubgroup:o}}function I(t,e,s){k.append("g").selectAll("g").data(i).join("g").attr("transform",(e=>`translate(${String(t(e.group))}, 0)`)).attr("class","bar").selectAll("rect").data((t=>q(t))).join("rect").attr("x",(t=>e(t.key))).attr("y",(()=>s(0))).attr("width",e.bandwidth()).attr("height",(()=>a-s(0))).style("fill",(()=>h)).style("cursor","pointer").on("mouseout",((t,e)=>{k.selectAll("rect").filter((function(t){return t!=e})).style("opacity",1),r(2,R.show=!1,R)})).on("mouseover",((t,s)=>{k.selectAll("rect").filter((function(t){return t!=s})).style("opacity",.7);const{left:a,top:o,width:i}=t.target.getBoundingClientRect();console.log(e.bandwidth()),r(2,R={show:!0,text:s.customtooltip?`${s.customtooltip}`:`${s.key} - ${s.value}`,left:a,top:o-50,width:i})})).on("click",((t,e)=>{z.dispatch("bar-clicked",e)})),k.selectAll("rect").transition().duration(800).attr("y",(t=>+t.value<0?s(0):s(+t.value))).attr("height",(t=>+t.value<0?s(+t.value)-s(0):a-s(+t.value+Number(d)))).delay(((t,e)=>100*e))}function D(t,e){k.select(".x-axis").call(w(t).tickFormat(j)),k.select(".y-axis").call(A(e).ticks(f).tickFormat(p));const r=F();k.selectAll(".y-axis .tick line").attr("stroke","#EEEDEA").attr("stroke-width","1px").attr("x2",r)}function H(){var t;if($){const e=F();null===(t=b.querySelector("#svg-chart"))||void 0===t||t.setAttribute("width",`${e}px`);const{x:r,y:s,xSubgroup:a}=B(e);D(r,s),k.selectAll(".bar").data(i).attr("transform",(t=>`translate(${Number(r(t.group))}, 0)`)).selectAll("rect").data((t=>q(t))).attr("x",(t=>a(t.key))).attr("width",a.bandwidth())}}return g((()=>{new ResizeObserver(H).observe(b),r(17,J=!0)})),t.$$set=t=>{"data"in t&&r(6,c=t.data),"chartheight"in t&&r(7,l=t.chartheight),"backgroundcolor"in t&&r(0,u=t.backgroundcolor),"scalemax"in t&&r(8,m=t.scalemax),"scalemin"in t&&r(9,d=t.scalemin),"color"in t&&r(10,h=t.color),"ticknumbers"in t&&r(11,f=t.ticknumbers),"tickleftformat"in t&&r(5,p=t.tickleftformat),"tickbottomformat"in t&&r(12,j=t.tickbottomformat),"svgs"in t&&r(13,E=t.svgs),"margins"in t&&r(14,C=t.margins)},t.$$.update=()=>{64&t.$$.dirty[0]&&r(15,i=c?JSON.parse(c):[]),32768&t.$$.dirty[0]&&(s=i.map((t=>t.group))),32768&t.$$.dirty[0]&&(n=i[0]?Object.keys(i[0]).filter((t=>"group"!==t)):[]),128&t.$$.dirty[0]&&(a=parseInt(l,10)),8192&t.$$.dirty[0]&&r(3,o=E?JSON.parse(E):[]),196672&t.$$.dirty[0]&&c.length>0&&J&&($?c!==$&&(!function(){var t;const e=F();null===(t=b.querySelector("#svg-chart"))||void 0===t||t.setAttribute("width",`${e}px`);const{x:r,y:s,xSubgroup:a}=B(e);D(r,s),k.selectAll(".bar").remove(),I(r,a,s)}(),r(16,$=c)):(!function(){const t=F(),{x:e,y:s,xSubgroup:o}=B(t);r(4,k=y(b).append("svg").attr("width",t).attr("height",Number(a)+Number(O(C).top)+Number(O(C).bottom)+Number(O(C).xAxis)).attr("id","svg-chart").append("g").attr("transform",`translate(${O(C).left/2+O(C).right/2},${O(C).top})`)),k.append("g").attr("transform",`translate(0, ${Number(a)+Number(O(C).xAxis)})`).call(w(e)).attr("class","x-axis").attr("stroke-width","0"),k.append("g").call(A(s).ticks(f).tickFormat(p)).attr("class","y-axis").attr("stroke-width","0"),I(e,o,s)}(),r(16,$=c)))},[u,b,R,o,k,p,c,l,m,d,h,f,j,E,C,i,$,J,function(t){x[t?"unshift":"push"]((()=>{b=t,r(1,b)}))}]}class R extends t{constructor(t){super();const i=document.createElement("style");i.textContent='.tooltip{height:auto;background-color:#4d4d4d;border-radius:4px;color:#ffffff;text-align:center;padding:0.5rem 1rem;position:absolute}.pattern{z-index:-1;position:relative}text{font-family:"LeroyMerlin", sans-serif;font-size:0.875rem;color:#4d4d4d}',this.shadowRoot.appendChild(i),e(this,{target:this.shadowRoot,props:r(this.attributes),customElement:!0},J,C,o,{data:6,chartheight:7,backgroundcolor:0,scalemax:8,scalemin:9,color:10,ticknumbers:11,tickleftformat:5,tickbottomformat:12,svgs:13,margins:14},null,[-1,-1]),t&&(t.target&&s(t.target,this,t.anchor),t.props&&(this.$set(t.props),a()))}static get observedAttributes(){return["data","chartheight","backgroundcolor","scalemax","scalemin","color","ticknumbers","tickleftformat","tickbottomformat","svgs","margins"]}get data(){return this.$$.ctx[6]}set data(t){this.$$set({data:t}),a()}get chartheight(){return this.$$.ctx[7]}set chartheight(t){this.$$set({chartheight:t}),a()}get backgroundcolor(){return this.$$.ctx[0]}set backgroundcolor(t){this.$$set({backgroundcolor:t}),a()}get scalemax(){return this.$$.ctx[8]}set scalemax(t){this.$$set({scalemax:t}),a()}get scalemin(){return this.$$.ctx[9]}set scalemin(t){this.$$set({scalemin:t}),a()}get color(){return this.$$.ctx[10]}set color(t){this.$$set({color:t}),a()}get ticknumbers(){return this.$$.ctx[11]}set ticknumbers(t){this.$$set({ticknumbers:t}),a()}get tickleftformat(){return this.$$.ctx[5]}set tickleftformat(t){this.$$set({tickleftformat:t}),a()}get tickbottomformat(){return this.$$.ctx[12]}set tickbottomformat(t){this.$$set({tickbottomformat:t}),a()}get svgs(){return this.$$.ctx[13]}set svgs(t){this.$$set({svgs:t}),a()}get margins(){return this.$$.ctx[14]}set margins(t){this.$$set({margins:t}),a()}}export{R as default};
 //# sourceMappingURL=BarChart.js.map

package/public/components/chart/BarChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BarChart.js","sources":["../../../src/components/chart/BarChart.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import {\n select,\n scaleBand,\n scaleLinear,\n axisBottom,\n axisLeft,\n Selection,\n ScaleBand,\n ScaleLinear,\n } from 'd3';\n import { onMount } from 'svelte';\n import type { BarData, BarKeyValue, BarMargin } from './bar-chart.types';\n import { EventHandler } from '../../utilities/EventHandler';\n\n export let data = '';\n let parsedData: BarData[];\n let subgroups: string[];\n $: parsedData = data ? (JSON.parse(data) as BarData[]) : [];\n $: groups = parsedData.map((d: BarData) => d.group);\n $: subgroups = parsedData[0]\n ? Object.keys(parsedData[0]).filter((d: string) => d !== 'group')\n : [];\n\n export let chartheight = '300';\n $: height = parseInt(chartheight, 10);\n\n export let backgroundcolor = '#fff';\n export let scalemax = 50;\n export let scalemin = 0;\n export let color = '#0B96CC';\n export let ticknumbers = 4;\n export let tickleftformat: (d: number, i: number) => string;\n tickleftformat = (d) => `${d}`;\n export let tickbottomformat: (d: number, i: number) => string = (d) => `${d}`;\n\n export let svgs: string;\n $: parsedSvgs = svgs ? (JSON.parse(svgs) as SVGElement[]) : [];\n\n export let margins: string;\n\n let _data: string;\n let chart: HTMLDivElement;\n let svg: Selection<SVGGElement, any, any, any>;\n let hasMounted = false;\n let tooltipData = { show: false, text: '', top: 0, left: 0, width: 0 };\n let eventHandler = new EventHandler();\n\n $: if (data.length > 0 && hasMounted) {\n if (!_data) {\n render();\n _data = data;\n } else if (data !== _data) {\n update();\n _data = data;\n }\n }\n\n function getParsedMargins(margins: string): BarMargin {\n if (margins) return JSON.parse(margins) as BarMargin;\n else\n return {\n top: 10,\n right: 40,\n bottom: 20,\n left: 60,\n xAxis: 20,\n } as BarMargin;\n }\n\n function getChartWidth() {\n let chartWidth = select(chart).style('width');\n if (chartWidth === '' \|\| !chartWidth) {\n chartWidth = `${window.innerWidth / 2}`;\n }\n return parseInt(chartWidth);\n }\n\n function getBarKeyValue(d: BarData): BarKeyValue[] {\n return subgroups.map((key) => ({\n key: key,\n value: d[key].value,\n customtooltip: d[key].customtooltip,\n }));\n }\n\n function getAxes(width: number) {\n const x = scaleBand()\n .domain(groups)\n .range([\n 0,\n width -\n (getParsedMargins(margins).left / 2 +\n getParsedMargins(margins).right / 2),\n ])\n .padding(0.2);\n const y = scaleLinear().domain([scalemin, scalemax]).range([height, 0]);\n const xSubgroup = scaleBand()\n .domain(subgroups)\n .range([0, x.bandwidth()])\n .padding(0.05);\n return { x, y, xSubgroup };\n }\n\n function addRectandles(\n x: ScaleBand<string>,\n xSubgroup: ScaleBand<string>,\n y: ScaleLinear<number, number, never>,\n ) {\n svg\n .append('g')\n .selectAll('g')\n .data(parsedData)\n .join('g')\n .attr('transform', (d) => `translate(${String(x(d.group))}, 0)`)\n .attr('class', 'bar')\n .selectAll('rect')\n .data((d) => getBarKeyValue(d))\n .join('rect')\n .attr('x', (d) => xSubgroup(d.key)!)\n .attr('y', () => y(0))\n .attr('width', xSubgroup.bandwidth())\n .attr('height', () => height - y(0))\n .style('fill', () => color)\n .style('cursor', 'pointer')\n .on('mouseout', (_e: MouseEvent, chartEvent: BarKeyValue) => {\n const others = svg.selectAll('rect').filter(function (arc) {\n return arc != chartEvent;\n });\n others.style('opacity', 1);\n tooltipData.show = false;\n })\n .on('mouseover', (e: MouseEvent, chartEvent: BarKeyValue) => {\n const others = svg.selectAll('rect').filter(function (arc) {\n return arc != chartEvent;\n });\n others.style('opacity', 0.7);\n const { left, top, width } = (\n e.target as HTMLElement\n ).getBoundingClientRect();\n tooltipData = {\n show: true,\n text: chartEvent.customtooltip\n ? `${chartEvent.customtooltip}`\n : `${chartEvent.key} - ${chartEvent.value}`,\n left: left,\n top: top - 50,\n width,\n };\n })\n .on('click', (_e: MouseEvent, chartEvent: BarKeyValue) => {\n eventHandler.dispatch('bar-clicked', chartEvent);\n });\n\n svg\n .selectAll<SVGElement, BarKeyValue>('rect')\n .transition()\n .duration(800)\n .attr('y', (d) => (+d.value < 0 ? y(0) : y(+d.value)))\n .attr('height', (d) =>\n +d.value < 0\n ? y(+d.value) - y(0)\n : height - y(+d.value + Number(scalemin)),\n )\n .delay((_d, i) => i * 100);\n }\n\n function updateAxes(\n x: ScaleBand<string>,\n y: ScaleLinear<number, number, never>,\n ) {\n svg\n .select('.x-axis')\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n .call((axisBottom(x) as any).tickFormat(tickbottomformat));\n svg\n .select('.y-axis')\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n .call((axisLeft(y) as any).ticks(ticknumbers).tickFormat(tickleftformat));\n\n const width = getChartWidth();\n svg\n .selectAll('.y-axis .tick line')\n .attr('stroke', '#EEEDEA')\n .attr('stroke-width', '1px')\n .attr('x2', width);\n }\n\n function render() {\n const width = getChartWidth();\n const { x, y, xSubgroup } = getAxes(width);\n\n svg = select<HTMLElement, any>(chart)\n .append('svg')\n .attr('width', width)\n .attr(\n 'height',\n Number(height) +\n Number(getParsedMargins(margins).top) +\n Number(getParsedMargins(margins).bottom) +\n Number(getParsedMargins(margins).xAxis),\n )\n .attr('id', 'svg-chart')\n .append('g')\n .attr(\n 'transform',\n `translate(${\n getParsedMargins(margins).left / 2 +\n getParsedMargins(margins).right / 2\n },${getParsedMargins(margins).top})`,\n );\n\n svg\n .append('g')\n .attr(\n 'transform',\n `translate(0, ${\n Number(height) + Number(getParsedMargins(margins).xAxis)\n })`,\n )\n .call(axisBottom(x))\n .attr('class', 'x-axis')\n .attr('stroke-width', '0');\n\n svg\n .append('g')\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n .call((axisLeft(y) as any).ticks(ticknumbers).tickFormat(tickleftformat))\n .attr('class', 'y-axis')\n .attr('stroke-width', '0');\n\n addRectandles(x, xSubgroup, y);\n }\n\n function update() {\n const width = getChartWidth();\n chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);\n\n const { x, y, xSubgroup } = getAxes(width);\n updateAxes(x, y);\n svg.selectAll('.bar').remove();\n addRectandles(x, xSubgroup, y);\n }\n\n function resize() {\n if (_data) {\n const width = getChartWidth();\n chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);\n\n const { x, y, xSubgroup } = getAxes(width);\n updateAxes(x, y);\n\n svg\n .selectAll('.bar')\n .data(parsedData)\n .attr('transform', (d) => `translate(${Number(x(d.group))}, 0)`)\n .selectAll<SVGElement, BarKeyValue>('rect')\n .data((d) => getBarKeyValue(d))\n .attr('x', (d) => xSubgroup(d.key)!)\n .attr('width', xSubgroup.bandwidth());\n }\n }\n\n onMount(() => {\n const resizeObserver = new ResizeObserver(resize);\n resizeObserver.observe(chart);\n hasMounted = true;\n });\n</script>\n\n<div bind:this={chart} style=\"background-color: {backgroundcolor};\" />\n\n{#if tooltipData.show}\n <div\n class=\"tooltip\"\n style={`top: ${tooltipData.top}px; left: ${tooltipData.left}px; width: ${tooltipData.width}px;`}\n >\n {tooltipData.text}\n </div>\n{/if}\n\n<div style=\"height: 0; width: 0;\" class=\"pattern\">\n {#each parsedSvgs as svg}\n {@html svg}\n {/each}\n</div>\n<text />\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n\n .tooltip {\n height: auto;\n background-color: $color-grey-700;\n border-radius: 4px;\n color: $color-grey-000;\n text-align: center;\n padding: magic-unit-rem(0.5) 0;\n position: absolute;\n }\n\n .pattern {\n z-index: -1;\n position: relative;\n }\n\n text {\n font-family: 'LeroyMerlin', sans-serif;\n font-size: $size-font-04;\n color: $color-grey-700;\n }\n</style>\n"],"names":["t_value","ctx","text","top","left","width","insert","target","div","anchor","dirty","set_data","t","html_tag","p","raw_value","if_block","show","create_if_block","length","i","div0","div1","text_1","getParsedMargins","margins","JSON","parse","right","bottom","xAxis","parsedData","subgroups","data","$$props","chartheight","backgroundcolor","scalemax","scalemin","color","ticknumbers","tickleftformat","d","_data","chart","svg","tickbottomformat","svgs","hasMounted","tooltipData","eventHandler","EventHandler","getChartWidth","chartWidth","select","style","window","innerWidth","parseInt","getBarKeyValue","map","key","value","customtooltip","getAxes","x","scaleBand","domain","groups","range","padding","y","scaleLinear","height","xSubgroup","bandwidth","addRectandles","append","selectAll","join","attr","String","group","on","_e","chartEvent","filter","arc","e","getBoundingClientRect","dispatch","transition","duration","Number","delay","_d","updateAxes","call","axisBottom","tickFormat","axisLeft","ticks","resize","_a","querySelector","setAttribute","onMount","ResizeObserver","observe","$$invalidate","Object","keys","parsedSvgs","remove","update","render","$$value"],"mappings":"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"}
1	+ {"version":3,"file":"BarChart.js","sources":["../../../src/components/chart/BarChart.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import {\n select,\n scaleBand,\n scaleLinear,\n axisBottom,\n axisLeft,\n Selection,\n ScaleBand,\n ScaleLinear,\n } from 'd3';\n import { onMount } from 'svelte';\n import type { BarData, BarKeyValue, BarMargin } from './bar-chart.types';\n import { EventHandler } from '../../utilities/EventHandler';\n\n export let data = '';\n let parsedData: BarData[];\n let subgroups: string[];\n $: parsedData = data ? (JSON.parse(data) as BarData[]) : [];\n $: groups = parsedData.map((d: BarData) => d.group);\n $: subgroups = parsedData[0]\n ? Object.keys(parsedData[0]).filter((d: string) => d !== 'group')\n : [];\n\n export let chartheight = '300';\n $: height = parseInt(chartheight, 10);\n\n export let backgroundcolor = '#fff';\n export let scalemax = 50;\n export let scalemin = 0;\n export let color = '#0B96CC';\n export let ticknumbers = 4;\n export let tickleftformat: (d: number, i: number) => string;\n tickleftformat = (d) => `${d}`;\n export let tickbottomformat: (d: number, i: number) => string = (d) => `${d}`;\n\n export let svgs: string;\n $: parsedSvgs = svgs ? (JSON.parse(svgs) as SVGElement[]) : [];\n\n export let margins: string;\n\n let _data: string;\n let chart: HTMLDivElement;\n let svg: Selection<SVGGElement, any, any, any>;\n let hasMounted = false;\n let tooltipData = { show: false, text: '', top: 0, left: 0, width: 0 };\n let eventHandler = new EventHandler();\n\n $: if (data.length > 0 && hasMounted) {\n if (!_data) {\n render();\n _data = data;\n } else if (data !== _data) {\n update();\n _data = data;\n }\n }\n\n function getParsedMargins(margins: string): BarMargin {\n if (margins) return JSON.parse(margins) as BarMargin;\n else\n return {\n top: 10,\n right: 40,\n bottom: 20,\n left: 60,\n xAxis: 20,\n } as BarMargin;\n }\n\n function getChartWidth() {\n let chartWidth = select(chart).style('width');\n if (chartWidth === '' \|\| !chartWidth) {\n chartWidth = `${window.innerWidth / 2}`;\n }\n return parseInt(chartWidth);\n }\n\n function getBarKeyValue(d: BarData): BarKeyValue[] {\n return subgroups.map((key) => ({\n key: key,\n value: d[key].value,\n customtooltip: d[key].customtooltip,\n }));\n }\n\n function getAxes(width: number) {\n const x = scaleBand()\n .domain(groups)\n .range([\n 0,\n width -\n (getParsedMargins(margins).left / 2 +\n getParsedMargins(margins).right / 2),\n ])\n .padding(0.2);\n const y = scaleLinear().domain([scalemin, scalemax]).range([height, 0]);\n const xSubgroup = scaleBand()\n .domain(subgroups)\n .range([0, x.bandwidth()])\n .padding(0.05);\n return { x, y, xSubgroup };\n }\n\n function addRectandles(\n x: ScaleBand<string>,\n xSubgroup: ScaleBand<string>,\n y: ScaleLinear<number, number, never>,\n ) {\n svg\n .append('g')\n .selectAll('g')\n .data(parsedData)\n .join('g')\n .attr('transform', (d) => `translate(${String(x(d.group))}, 0)`)\n .attr('class', 'bar')\n .selectAll('rect')\n .data((d) => getBarKeyValue(d))\n .join('rect')\n .attr('x', (d) => xSubgroup(d.key)!)\n .attr('y', () => y(0))\n .attr('width', xSubgroup.bandwidth())\n .attr('height', () => height - y(0))\n .style('fill', () => color)\n .style('cursor', 'pointer')\n .on('mouseout', (_e: MouseEvent, chartEvent: BarKeyValue) => {\n const others = svg.selectAll('rect').filter(function (arc) {\n return arc != chartEvent;\n });\n others.style('opacity', 1);\n tooltipData.show = false;\n })\n .on('mouseover', (e: MouseEvent, chartEvent: BarKeyValue) => {\n const others = svg.selectAll('rect').filter(function (arc) {\n return arc != chartEvent;\n });\n others.style('opacity', 0.7);\n const { left, top, width } = (\n e.target as HTMLElement\n ).getBoundingClientRect();\n console.log(xSubgroup.bandwidth());\n tooltipData = {\n show: true,\n text: chartEvent.customtooltip\n ? `${chartEvent.customtooltip}`\n : `${chartEvent.key} - ${chartEvent.value}`,\n left: left,\n top: top - 50,\n width,\n };\n })\n .on('click', (_e: MouseEvent, chartEvent: BarKeyValue) => {\n eventHandler.dispatch('bar-clicked', chartEvent);\n });\n\n svg\n .selectAll<SVGElement, BarKeyValue>('rect')\n .transition()\n .duration(800)\n .attr('y', (d) => (+d.value < 0 ? y(0) : y(+d.value)))\n .attr('height', (d) =>\n +d.value < 0\n ? y(+d.value) - y(0)\n : height - y(+d.value + Number(scalemin)),\n )\n .delay((_d, i) => i * 100);\n }\n\n function updateAxes(\n x: ScaleBand<string>,\n y: ScaleLinear<number, number, never>,\n ) {\n svg\n .select('.x-axis')\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n .call((axisBottom(x) as any).tickFormat(tickbottomformat));\n svg\n .select('.y-axis')\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n .call((axisLeft(y) as any).ticks(ticknumbers).tickFormat(tickleftformat));\n\n const width = getChartWidth();\n svg\n .selectAll('.y-axis .tick line')\n .attr('stroke', '#EEEDEA')\n .attr('stroke-width', '1px')\n .attr('x2', width);\n }\n\n function render() {\n const width = getChartWidth();\n const { x, y, xSubgroup } = getAxes(width);\n\n svg = select<HTMLElement, any>(chart)\n .append('svg')\n .attr('width', width)\n .attr(\n 'height',\n Number(height) +\n Number(getParsedMargins(margins).top) +\n Number(getParsedMargins(margins).bottom) +\n Number(getParsedMargins(margins).xAxis),\n )\n .attr('id', 'svg-chart')\n .append('g')\n .attr(\n 'transform',\n `translate(${\n getParsedMargins(margins).left / 2 +\n getParsedMargins(margins).right / 2\n },${getParsedMargins(margins).top})`,\n );\n\n svg\n .append('g')\n .attr(\n 'transform',\n `translate(0, ${\n Number(height) + Number(getParsedMargins(margins).xAxis)\n })`,\n )\n .call(axisBottom(x))\n .attr('class', 'x-axis')\n .attr('stroke-width', '0');\n\n svg\n .append('g')\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n .call((axisLeft(y) as any).ticks(ticknumbers).tickFormat(tickleftformat))\n .attr('class', 'y-axis')\n .attr('stroke-width', '0');\n\n addRectandles(x, xSubgroup, y);\n }\n\n function update() {\n const width = getChartWidth();\n chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);\n\n const { x, y, xSubgroup } = getAxes(width);\n updateAxes(x, y);\n svg.selectAll('.bar').remove();\n addRectandles(x, xSubgroup, y);\n }\n\n function resize() {\n if (_data) {\n const width = getChartWidth();\n chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);\n\n const { x, y, xSubgroup } = getAxes(width);\n updateAxes(x, y);\n\n svg\n .selectAll('.bar')\n .data(parsedData)\n .attr('transform', (d) => `translate(${Number(x(d.group))}, 0)`)\n .selectAll<SVGElement, BarKeyValue>('rect')\n .data((d) => getBarKeyValue(d))\n .attr('x', (d) => xSubgroup(d.key)!)\n .attr('width', xSubgroup.bandwidth());\n }\n }\n\n onMount(() => {\n const resizeObserver = new ResizeObserver(resize);\n resizeObserver.observe(chart);\n hasMounted = true;\n });\n</script>\n\n<div bind:this={chart} style=\"background-color: {backgroundcolor};\" />\n{#if true}\n <div\n class=\"tooltip\"\n style={`top: ${tooltipData.top}px; left: ${tooltipData.left}px;`}\n >\n {tooltipData.text}\n </div>\n{/if}\n<div style=\"height: 0; width: 0;\" class=\"pattern\">\n {#each parsedSvgs as svg}\n {@html svg}\n {/each}\n</div>\n<text />\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n\n .tooltip {\n height: auto;\n background-color: $color-grey-700;\n border-radius: 4px;\n color: $color-grey-000;\n text-align: center;\n padding: $mu050 $mu100;\n position: absolute;\n }\n\n .pattern {\n z-index: -1;\n position: relative;\n }\n\n text {\n font-family: 'LeroyMerlin', sans-serif;\n font-size: $size-font-04;\n color: $color-grey-700;\n }\n</style>\n"],"names":["ctx","html_tag","p","raw_value","t_value","text","attr","div","div_style_value","top","left","insert","target","anchor","dirty","set_data","t","create_if_block","length","i","div0","div1","text_1","if_block","getParsedMargins","margins","JSON","parse","right","bottom","xAxis","parsedData","subgroups","data","$$props","chartheight","backgroundcolor","scalemax","scalemin","color","ticknumbers","tickleftformat","d","_data","chart","svg","tickbottomformat","svgs","hasMounted","tooltipData","show","width","eventHandler","EventHandler","getChartWidth","chartWidth","select","style","window","innerWidth","parseInt","getBarKeyValue","map","key","value","customtooltip","getAxes","x","scaleBand","domain","groups","range","padding","y","scaleLinear","height","xSubgroup","bandwidth","addRectandles","append","selectAll","join","String","group","on","_e","chartEvent","filter","arc","e","getBoundingClientRect","console","log","dispatch","transition","duration","Number","delay","_d","updateAxes","call","axisBottom","tickFormat","axisLeft","ticks","resize","_a","querySelector","setAttribute","onMount","ResizeObserver","observe","$$invalidate","Object","keys","parsedSvgs","remove","update","render","$$value"],"mappings":"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"}