@mozaic-ds/web-components 0.7.0 → 0.9.0

package/public/components/chart/BarChart.js

@@ -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

@@ -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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"}
+{"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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"}