@mozaic-ds/web-components 0.13.0 → 0.14.0

package/public/components/carousel/Carousel.svelte

@@ -0,0 +1,421 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import type {
+    CarouselDevice,
+    CarouselItem,
+    CarouselOptions,
+    CarouselTitleTag,
+  } from './carousel.types';
+  import Link from '../link/Link.nested.svelte';
+  import CarouselCard from './CarouselCard.nested.svelte';
+  import Button from '../button/Button.nested.svelte';
+  import { EventHandler } from '../../utilities/EventHandler';
+  import { onMount } from 'svelte';
+  import {
+    get_current_component,
+    createEventDispatcher,
+  } from 'svelte/internal';
+
+  export let title: string;
+  export let titletag: CarouselTitleTag = 'h1';
+  export let subtitlelink: string;
+  export let mobile = false;
+  export let options: string;
+  export let items: string;
+
+  const mediaQueryS: MediaQueryList = window.matchMedia('(max-width: 679px)');
+  const mediaQueryM: MediaQueryList = window.matchMedia(
+    '(min-width: 680px) and (max-width: 1279px)',
+  );
+  const mediaQueryXL: MediaQueryList = window.matchMedia('(min-width: 1280px)');
+
+  // default options for all 3 screen sizes (s = <m ; m = >=m to <xl ; xl  = >=xl)
+  const defaultCarouselOptions: CarouselOptions = {
+    s: {
+      itemsVisible: 1,
+      hasHalfItemVisible: true,
+    },
+    m: {
+      itemsVisible: 3,
+      hasHalfItemVisible: false,
+    },
+    xl: {
+      itemsVisible: 5,
+      hasHalfItemVisible: false,
+    },
+  };
+
+  // size using to separate item. Useful for gap in css and for move the scroll.
+  let betweenItemsPixelSize = 16;
+
+  // needed padding to display the outlined focus border on carousel items
+  let accessibilityFocusPadding = 4;
+
+  let eventHandler = new EventHandler(
+    get_current_component(),
+    createEventDispatcher(),
+  );
+
+  let currentDevice: CarouselDevice = initCurrentDevice(
+    mediaQueryM,
+    mediaQueryXL,
+  );
+
+  let carouselContainer: HTMLDivElement;
+  let carouselScrollbarLeft = 0;
+
+  let isScrollBeginning = true;
+  let isScrollEnd = false;
+
+  $: carouselItems = items ? (JSON.parse(items) as CarouselItem[]) : [];
+  $: carouselOptions = options
+    ? Object.assign(
+        {},
+        defaultCarouselOptions,
+        JSON.parse(options) as CarouselOptions,
+      )
+    : defaultCarouselOptions;
+  $: carouselItemsSize = carouselItems?.length;
+
+  $: carouselCurrentItemsVisible = carouselOptions[currentDevice].itemsVisible;
+  $: carouselCurrentHasHalfItemVisible =
+    carouselOptions[currentDevice].hasHalfItemVisible || false;
+  $: carouselCurrentItemsSize =
+    carouselItemsSize < carouselCurrentItemsVisible
+      ? carouselCurrentItemsVisible
+      : carouselItemsSize;
+
+  $: carouselCurrentItemsVisibleAndHalf = carouselCurrentHasHalfItemVisible
+    ? carouselCurrentItemsVisible + 0.5
+    : carouselCurrentItemsVisible;
+
+  $: carouselItemWidthSpace = getCarouselItemsWidthSpace(
+    carouselCurrentItemsVisible,
+    carouselCurrentHasHalfItemVisible,
+  );
+  $: carouselContainerWidthSpace = getCarouselContainerWidthSpace(
+    carouselCurrentItemsSize,
+  );
+
+  /* returns the total size of the spacing between items for the big container */
+  function getCarouselContainerWidthSpace(totalItems: number) {
+    return (totalItems - 1) * betweenItemsPixelSize;
+  }
+
+  /* returns the total size of the spacing between items for the screen size */
+  function getCarouselItemsWidthSpace(
+    itemsVisible: number,
+    itemsAndHalfVisible: boolean,
+  ) {
+    if (itemsAndHalfVisible) {
+      return itemsVisible * betweenItemsPixelSize;
+    }
+    return (itemsVisible - 1) * betweenItemsPixelSize;
+  }
+
+  /* move the scroll to change the displaying items.
+     1 to move right, -1 to move left
+     */
+  function moveScroll(signe: 1 | -1) {
+    /* returns the size in pixel of an item according to screen size and the number of items visible. */
+    function getCarouselItemWidth() {
+      const carouselItemsWidthSpace = getCarouselItemsWidthSpace(
+        carouselCurrentItemsVisible,
+        carouselCurrentHasHalfItemVisible,
+      );
+      if (carouselCurrentHasHalfItemVisible) {
+        return (
+          (carouselContainer.clientWidth - carouselItemsWidthSpace) /
+          carouselCurrentItemsVisibleAndHalf
+        );
+      } else {
+        return (
+          (carouselContainer.clientWidth - carouselItemsWidthSpace) /
+          carouselCurrentItemsVisible
+        );
+      }
+    }
+
+    /* returns the new left position of the scrollbar
+     *  in the case of visible half items, the calculation depends if the carousel is at the beginnind, at the end or in the middle.
+     *
+     */
+    function getLeft() {
+      if (!carouselCurrentHasHalfItemVisible) {
+        return (
+          carouselContainer.scrollLeft +
+          signe *
+            (carouselContainer.clientWidth +
+              betweenItemsPixelSize -
+              accessibilityFocusPadding * 2)
+        );
+      }
+      const itemWidth = getCarouselItemWidth();
+      if (isScrollBeginning) {
+        return (
+          carouselContainer.scrollLeft +
+          (signe *
+            (carouselContainer.clientWidth -
+              (3 / 4) * itemWidth -
+              betweenItemsPixelSize) +
+            accessibilityFocusPadding)
+        );
+      }
+      if (isScrollEnd) {
+        return (
+          carouselContainer.scrollLeft +
+          signe *
+            (carouselContainer.clientWidth -
+              (3 / 4) * itemWidth -
+              betweenItemsPixelSize)
+        );
+      }
+      return (
+        carouselContainer.scrollLeft +
+        signe *
+          (carouselContainer.clientWidth -
+            itemWidth / 2 -
+            betweenItemsPixelSize +
+            accessibilityFocusPadding * 2)
+      );
+    }
+
+    carouselContainer.scrollTo({ behavior: 'smooth', left: getLeft() });
+  }
+
+  function nextCards() {
+    moveScroll(1);
+  }
+
+  function previousCards() {
+    moveScroll(-1);
+  }
+
+  function handleScrollCarousel() {
+    isScrollBeginning = carouselContainer?.scrollLeft <= 0;
+    isScrollEnd =
+      carouselContainer?.scrollWidth - carouselContainer?.scrollLeft <=
+      carouselContainer.offsetWidth;
+  }
+
+  function handleClickCard(item: CarouselItem, event: MouseEvent): MouseEvent {
+    eventHandler.dispatch('carousel-item-clicked', item);
+    return event;
+  }
+  function handleClickLink(event: MouseEvent): MouseEvent {
+    eventHandler.dispatch('carousel-link-clicked', {});
+    return event;
+  }
+
+  // returns device according to screen size
+  function initCurrentDevice(
+    mediaQueryM: MediaQueryList,
+    mediaQueryXL: MediaQueryList,
+  ) {
+    if (mediaQueryXL.matches) {
+      return 'xl';
+    }
+    if (mediaQueryM.matches) {
+      return 'm';
+    }
+    return 's';
+  }
+
+  function handleMediaQueryChange(
+    event: MediaQueryListEvent,
+    matchingDevice: CarouselDevice,
+  ): MediaQueryListEvent {
+    if (event.matches) {
+      currentDevice = matchingDevice;
+    }
+    return event;
+  }
+
+  onMount(() => {
+    mediaQueryS.onchange = (e) => {
+      handleMediaQueryChange(e, 's');
+    };
+    mediaQueryM.onchange = (e) => {
+      handleMediaQueryChange(e, 'm');
+    };
+    mediaQueryXL.onchange = (e) => {
+      handleMediaQueryChange(e, 'xl');
+    };
+  });
+</script>
+
+<div class="mc-carousel">
+  <div class="mc-carousel__header">
+    <div class="mc-carousel__titles">
+      {@html `<${titletag} style="margin:0">${title}</${titletag}>`}
+      <div class="mc-carousel__subtitle">
+        <Link
+          href="#layer"
+          iconname="navigation-arrow-arrow--right-24px"
+          iconposition="right"
+          label={subtitlelink}
+          on:click={handleClickLink}
+          size="s"
+          target="_self"
+        />
+      </div>
+    </div>
+    <nav
+      aria-label="pagination"
+      class="mc-carousel__nav {mobile
+        ? 'mc-carousel__nav--mobile'
+        : 'mc-carousel__nav--desktop'}"
+    >
+      <Button
+        theme="neutral"
+        size="s"
+        bordered={true}
+        iconmode="only"
+        iconname="navigation-arrow-arrow--left-32px"
+        aria-label="Previous page"
+        disabled={isScrollBeginning}
+        on:click={previousCards}
+        label="Previous"
+        loader=""
+      />
+      <Button
+        theme="neutral"
+        size="s"
+        type="button"
+        bordered={true}
+        disabled={isScrollEnd}
+        iconmode="only"
+        iconname="navigation-arrow-arrow--right-32px"
+        aria-label="Next Page"
+        on:click={nextCards}
+        label="Next"
+        loader=""
+      />
+    </nav>
+  </div>
+  <div
+    class="mc-carousel__body"
+    bind:this={carouselContainer}
+    on:scroll={handleScrollCarousel}
+    style="--carousel__accessibility-focus-padding: {accessibilityFocusPadding}px;"
+  >
+    <div
+      class="mc-carousel__content"
+      style="
+             --carousel__container-width-space: {carouselContainerWidthSpace}px;
+             --carousel__items-count: {carouselCurrentItemsSize};
+             --carousel__item-width-space: {carouselItemWidthSpace}px;
+             --carousel__items-visible: {carouselCurrentItemsVisibleAndHalf};
+             --carousel__scrollbar-left: {carouselScrollbarLeft};
+             --carousel__container-separate-item-size: {betweenItemsPixelSize}px;"
+    >
+      {#each carouselItems as item}
+        <button
+          class="mc-carousel__item"
+          on:click={(event) => handleClickCard(item, event)}
+        >
+          <CarouselCard
+            title={item.title}
+            imgSrc={item.imgSrc}
+            imgAlt={item.imgAlt}
+          />
+        </button>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/c.button';
+  @import '@mozaic-ds/styles/components/c.links';
+  @import '@mozaic-ds/styles/components/c.pagination';
+
+  .mc-carousel {
+    display: flex;
+    flex-direction: column;
+    gap: $mu100;
+
+    &__header {
+      /* Auto layout */
+
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+    }
+    &__titles {
+      display: flex;
+      flex-direction: column;
+      gap: $mu025;
+    }
+    &__nav {
+      gap: $mu050;
+      &--mobile {
+        display: none;
+      }
+      &--desktop {
+        display: flex;
+      }
+    }
+
+    &__body {
+      position: relative;
+      overflow-x: auto;
+      overflow-y: hidden;
+      padding: var(--carousel__accessibility-focus-padding);
+    }
+
+    &__content {
+      display: flex;
+      flex-wrap: nowrap;
+      column-gap: var(--carousel__container-separate-item-size);
+      // the total size of the big container for all items: taille d'un item * le nbre d'items + espace entre chaque item
+      width: calc(
+        (
+            (100% - var(--carousel__item-width-space)) /
+              var(--carousel__items-visible)
+          ) * var(--carousel__items-count) +
+          var(--carousel__container-width-space)
+      );
+      margin-bottom: $mu125;
+    }
+
+    &__item {
+      display: flex;
+      background: none;
+      border: none;
+      margin: 0;
+      padding: 0;
+      cursor: pointer;
+      // taille d'un item: (100% - les espaces entre chaque item isible) / le nombre d'items visible
+      width: calc(
+        (100% - var(--carousel__item-width-space)) /
+          var(--carousel__items-visible)
+      );
+      @include set-focus-floating-base();
+
+      &:focus {
+        @include set-focus-floating();
+      }
+    }
+
+    &-footer {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  ::-webkit-scrollbar {
+    border-radius: $mu025;
+    height: 6px;
+    background: $color-grey-100;
+    border-top: 1px solid white;
+    border-bottom: 1px solid white;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: $color-grey-800;
+    border-radius: 6px;
+  }
+</style>

package/public/components/carousel/CarouselCard.nested.js

@@ -0,0 +1,2 @@
+import{E as e,i as o,s as t,F as s,c as l,e as i,d as a,t as r,g as k,$ as c,h as d,v as m,b as g,j as n,k as v,m as q,n as f,o as b,p as u,u as x}from"../../index-9ffad6d0.js";function p(e){s(e,"svelte-1gooqkk",'.mc-card.svelte-1gooqkk.svelte-1gooqkk{font-family:"LeroyMerlin", sans-serif;max-width:17.75rem}.mc-card.svelte-1gooqkk.svelte-1gooqkk,.mc-card.svelte-1gooqkk .svelte-1gooqkk{-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (min-width: 680px){.mc-card.svelte-1gooqkk.svelte-1gooqkk{max-width:18.25rem}}@media screen and (min-width: 1024px){.mc-card.svelte-1gooqkk.svelte-1gooqkk{max-width:18rem}}@media screen and (min-width: 1280px){.mc-card.svelte-1gooqkk.svelte-1gooqkk{max-width:17.5rem}}@media screen and (min-width: 1920px){.mc-card.svelte-1gooqkk.svelte-1gooqkk{max-width:27.25rem}}.mc-card__visual.svelte-1gooqkk.svelte-1gooqkk{margin:0;overflow:hidden;position:relative}.mc-card__visual.svelte-1gooqkk.svelte-1gooqkk::before{content:"";display:block;width:100%;padding-top:75%}.mc-card__visual--1x1.svelte-1gooqkk.svelte-1gooqkk::before{padding-top:100%}.mc-card__visual--16x9.svelte-1gooqkk.svelte-1gooqkk::before{padding-top:56.25%}.mc-card__img.svelte-1gooqkk.svelte-1gooqkk{height:auto;left:0;position:absolute;top:50%;width:100%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.mc-card__content.svelte-1gooqkk.svelte-1gooqkk{padding-top:1rem}.mc-card__title.svelte-1gooqkk.svelte-1gooqkk,.mc-card__subtitle.svelte-1gooqkk.svelte-1gooqkk{margin-top:0;margin-bottom:0.5rem}.mc-card__title.svelte-1gooqkk.svelte-1gooqkk{font-size:1.125rem;line-height:1.3333333333;font-weight:600;color:#000000}.mc-card__subtitle.svelte-1gooqkk.svelte-1gooqkk{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#333333}.mc-card__body.svelte-1gooqkk.svelte-1gooqkk{font-size:1rem;line-height:1.375;color:#191919}.mc-card__body.svelte-1gooqkk.svelte-1gooqkk:not(:last-child){margin-bottom:1rem}.mc-card--bordered.svelte-1gooqkk.svelte-1gooqkk{background:#ffffff;border:2px solid #808080;border-radius:0.25rem;overflow:hidden}.mc-card--fluid.svelte-1gooqkk.svelte-1gooqkk{max-width:none}.mc-carousel-card.svelte-1gooqkk.svelte-1gooqkk{font-family:"LeroyMerlin", sans-serif;font-weight:400;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:0.5rem;gap:0.25rem;border:1px solid #666666;border-radius:0.25rem}.mc-carousel-card.svelte-1gooqkk .mc-carousel-card__image.svelte-1gooqkk{width:100%}')}function h(e){let o,t,s,u,x,p,h,_=[e[3],{class:"mc-carousel-card"}],w={};for(let e=0;e<_.length;e+=1)w=l(w,_[e]);return{c(){o=i("div"),t=i("picture"),s=i("img"),x=a(),p=i("div"),h=r(e[0]),k(s,"class","mc-carousel-card__image svelte-1gooqkk"),c(s.src,u=e[1])||k(s,"src",u),k(s,"alt",e[2]),k(t,"class","svelte-1gooqkk"),k(p,"class","mc-carousel-card__title svelte-1gooqkk"),d(o,w),m(o,"svelte-1gooqkk",!0)},m(e,l){g(e,o,l),n(o,t),n(t,s),n(o,x),n(o,p),n(p,h)},p(e,[t]){2&t&&!c(s.src,u=e[1])&&k(s,"src",u),4&t&&k(s,"alt",e[2]),1&t&&v(h,e[0]),d(o,w=q(_,[8&t&&e[3],{class:"mc-carousel-card"}])),m(o,"svelte-1gooqkk",!0)},i:f,o:f,d(e){e&&b(o)}}}function _(e,o,t){let s;const i=["title","imgSrc","imgAlt"];let a=u(o,i),{title:r}=o,{imgSrc:k}=o,{imgAlt:c}=o;return e.$$set=e=>{o=l(l({},o),x(e)),t(4,a=u(o,i)),"title"in e&&t(0,r=e.title),"imgSrc"in e&&t(1,k=e.imgSrc),"imgAlt"in e&&t(2,c=e.imgAlt)},e.$$.update=()=>{t(3,s=Object.assign({},a))},[r,k,c,s]}class w extends e{constructor(e){super(),o(this,e,_,h,t,{title:0,imgSrc:1,imgAlt:2},p)}}export{w as default};
+//# sourceMappingURL=CarouselCard.nested.js.map

package/public/components/carousel/CarouselCard.nested.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselCard.nested.js","sources":["../../../src/components/carousel/CarouselCard.nested.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  export let title: string;\n  export let imgSrc: string;\n  export let imgAlt: string;\n  $: attributes = { ...$$restProps };\n</script>\n\n<div {...attributes} class=\"mc-carousel-card\">\n  <picture>\n    <img class=\"mc-carousel-card__image\" src={imgSrc} alt={imgAlt} />\n  </picture>\n  <div class=\"mc-carousel-card__title\">{title}</div>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.card';\n\n  .mc-carousel-card {\n    $parent: get-parent-selector(&);\n    @include set-font-face();\n\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: $mu050;\n    gap: $mu025;\n    border: 1px solid $color-grey-600;\n    border-radius: $mu025;\n\n    #{$parent}__image {\n      width: 100%;\n    }\n  }\n</style>\n"],"names":["ctx","class","attr","img","img_src_value","insert","target","div1","anchor","append","picture","div0","title","$$props","imgSrc","imgAlt","attributes","Object","assign","$$restProps"],"mappings":"woFASSA,EAAU,GAAA,CAAAC,MAAA,uIAIqBD,EAAK,oEAFCA,EAAM,KAAAE,EAAAC,EAAA,MAAAC,aAAOJ,EAAM,gIAFjEK,EAKKC,EAAAC,EAAAC,GAJHC,EAESF,EAAAG,GADPD,EAAgEC,EAAAP,UAElEM,EAAiDF,EAAAI,oCAFLX,EAAM,iCAAOA,EAAM,aAEzBA,EAAK,oBAJpCA,EAAU,kKANNY,GAAaC,UACbC,GAAcD,UACdE,GAAcF,mKACtBG,EAALC,OAAAC,UAAuBC,GAAW"}

package/public/components/carousel/carousel.types.d.ts

@@ -0,0 +1,19 @@
+export type CarouselTitleTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type CarouselDevice = 's' | 'm' | 'xl';
+export type CarouselOptions = {
+    s: ItemOptions;
+    m: ItemOptions;
+    xl: ItemOptions;
+};
+type ItemOptions = {
+    itemsVisible: number;
+    hasHalfItemVisible?: boolean;
+};
+export type CarouselItem = {
+    id?: string;
+    title: string;
+    imgSrc: string;
+    imgAlt: string;
+};
+export {};
+//# sourceMappingURL=carousel.types.d.ts.map

package/public/components/carousel/carousel.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.types.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/carousel.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvE,MAAM,MAAM,cAAc,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG;IAC1B,CAAC,EAAE,WAAW,CAAC;IACf,CAAC,EAAE,WAAW,CAAC;IACf,EAAE,EAAE,WAAW,CAAC;CACnB,CAAA;AAED,KAAK,WAAW,GAAG;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB,CAAA"}

package/public/components/carouselcard/CarouselCard.nested.svelte

@@ -0,0 +1,37 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  export let title: string;
+  export let imgSrc: string;
+  export let imgAlt: string;
+  $: attributes = { ...$$restProps };
+</script>
+
+<div {...attributes} class="mc-carousel-card">
+  <picture>
+    <img class="mc-carousel-card__image" src={imgSrc} alt={imgAlt} />
+  </picture>
+  <div class="mc-carousel-card__title">{title}</div>
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/c.card';
+
+  .mc-carousel-card {
+    $parent: get-parent-selector(&);
+    @include set-font-face();
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: $mu050;
+    gap: $mu025;
+    border: 1px solid $color-grey-600;
+    border-radius: $mu025;
+
+    #{$parent}__image {
+      width: 100%;
+    }
+  }
+</style>

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,G as c,n as l,J as u,g as d,o as m,O as h,a1 as g,t as f,j as p,k as $,P as b,H as x,Z as k}from"../../index-52f16292.js";import{s as y}from"../../transform-15d69d5d.js";import{E as v}from"../../EventHandler-f4efd23c.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;`)},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;`)&&d(e,"style",a)},d(t){t&&m(e)}}}function O(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&&m(r),t&&e.d()}}}function C(t){let e,r,a,o,g,f,p=t[2].show&&E(t),$=t[3],b=[];for(let e=0;e<$.length;e+=1)b[e]=O(j(t,$,e));return{c(){e=i("div"),r=n(),p&&p.c(),a=n(),o=i("div");for(let t=0;t<b.length;t+=1)b[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<b.length;t+=1)b[t]&&b[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);b[e]?b[e].p(s,r):(b[e]=O(s),b[e].c(),b[e].m(o,null))}for(;e<b.length;e+=1)b[e].d(1);b.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(b,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 $,b,k,{tickbottomformat:j=(t=>`${t}`)}=e,{svgs:E}=e,{margins:O}=e,C=!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-(J(O).left/2+J(O).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 H(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(m)))).delay(((t,e)=>100*e))}function I(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 D(){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);I(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(D).observe(b),r(17,C=!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,O=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&&C&&($?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);I(r,s),k.selectAll(".bar").remove(),H(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(J(O).top)+Number(J(O).bottom)+Number(J(O).xAxis)).attr("id","svg-chart").append("g").attr("transform",`translate(${J(O).left/2+J(O).right/2},${J(O).top})`)),k.append("g").attr("transform",`translate(0, ${Number(a)+Number(J(O).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"),H(e,o,s)}(),r(16,$=c)))},[u,b,R,o,k,p,c,l,d,m,h,f,j,E,O,i,$,C,function(t){x[t?"unshift":"push"]((()=>{b=t,r(1,b)}))}]}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 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},R,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{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,G as c,n as l,J as u,g as d,o as m,O as h,q as g,r as f,a1 as p,t as $,j as b,k as x,P as k,H as y,Z as v}from"../../index-9ffad6d0.js";import{s as w}from"../../transform-15d69d5d.js";import{E as A}from"../../EventHandler-f7ee47ca.js";import{a as N,b as S}from"../../axis-fbc0f7b5.js";import{b as j}from"../../band-d7a07d2c.js";import{l as E}from"../../linear-f46d7e9e.js";function O(t,e,r){const s=t.slice();return s[4]=e[r],s}function C(t){let e,r,a,o=t[2].text+"";return{c(){e=i("div"),r=$(o),d(e,"class","tooltip"),d(e,"style",a=`top: ${t[2].top}px; left: ${t[2].left}px;`)},m(t,a){s(t,e,a),b(e,r)},p(t,s){4&s[0]&&o!==(o=t[2].text+"")&&x(r,o),4&s[0]&&a!==(a=`top: ${t[2].top}px; left: ${t[2].left}px;`)&&d(e,"style",a)},d(t){t&&m(e)}}}function J(t){let e,r,a=t[4]+"";return{c(){e=new v(!1),r=k(),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 R(t){let e,r,a,o,g,f,p=t[2].show&&C(t),$=t[3],b=[];for(let e=0;e<$.length;e+=1)b[e]=J(O(t,$,e));return{c(){e=i("div"),r=n(),p&&p.c(),a=n(),o=i("div");for(let t=0;t<b.length;t+=1)b[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<b.length;t+=1)b[t]&&b[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=C(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=O(t,$,e);b[e]?b[e].p(s,r):(b[e]=J(s),b[e].c(),b[e].m(o,null))}for(;e<b.length;e+=1)b[e].d(1);b.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(b,s),s&&m(g),s&&m(f)}}}function q(t){return t?JSON.parse(t):{top:10,right:40,bottom:20,left:60,xAxis:20}}function z(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:$=4}=e,{tickleftformat:b}=e;b=t=>`${t}`;let x,k,v,{tickbottomformat:O=(t=>`${t}`)}=e,{svgs:C}=e,{margins:J}=e,R=!1,z={show:!1,text:"",top:0,left:0,width:0},F=new A(g(),f());function B(){let t=w(k).style("width");return""!==t&&t||(t=""+window.innerWidth/2),parseInt(t)}function H(t){return n.map((e=>({key:e,value:t[e].value,customtooltip:t[e].customtooltip})))}function I(t){const e=j().domain(s).range([0,t-(q(J).left/2+q(J).right/2)]).padding(.2),r=E().domain([m,d]).range([a,0]),o=j().domain(n).range([0,e.bandwidth()]).padding(.05);return{x:e,y:r,xSubgroup:o}}function D(t,e,s){v.append("g").selectAll("g").data(i).join("g").attr("transform",(e=>`translate(${String(t(e.group))}, 0)`)).attr("class","bar").selectAll("rect").data((t=>H(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)=>{v.selectAll("rect").filter((function(t){return t!=e})).style("opacity",1),r(2,z.show=!1,z)})).on("mouseover",((t,s)=>{v.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,z={show:!0,text:s.customtooltip?`${s.customtooltip}`:`${s.key} - ${s.value}`,left:a,top:o-50,width:i})})).on("click",((t,e)=>{F.dispatch("bar-clicked",e)})),v.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 G(t,e){v.select(".x-axis").call(N(t).tickFormat(O)),v.select(".y-axis").call(S(e).ticks($).tickFormat(b));const r=B();v.selectAll(".y-axis .tick line").attr("stroke","#EEEDEA").attr("stroke-width","1px").attr("x2",r)}function L(){var t;if(x){const e=B();null===(t=k.querySelector("#svg-chart"))||void 0===t||t.setAttribute("width",`${e}px`);const{x:r,y:s,xSubgroup:a}=I(e);G(r,s),v.selectAll(".bar").data(i).attr("transform",(t=>`translate(${Number(r(t.group))}, 0)`)).selectAll("rect").data((t=>H(t))).attr("x",(t=>a(t.key))).attr("width",a.bandwidth())}}return p((()=>{new ResizeObserver(L).observe(k),r(17,R=!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,$=t.ticknumbers),"tickleftformat"in t&&r(5,b=t.tickleftformat),"tickbottomformat"in t&&r(12,O=t.tickbottomformat),"svgs"in t&&r(13,C=t.svgs),"margins"in t&&r(14,J=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=C?JSON.parse(C):[]),196672&t.$$.dirty[0]&&c.length>0&&R&&(x?c!==x&&(!function(){var t;const e=B();null===(t=k.querySelector("#svg-chart"))||void 0===t||t.setAttribute("width",`${e}px`);const{x:r,y:s,xSubgroup:a}=I(e);G(r,s),v.selectAll(".bar").remove(),D(r,a,s)}(),r(16,x=c)):(!function(){const t=B(),{x:e,y:s,xSubgroup:o}=I(t);r(4,v=w(k).append("svg").attr("width",t).attr("height",Number(a)+Number(q(J).top)+Number(q(J).bottom)+Number(q(J).xAxis)).attr("id","svg-chart").append("g").attr("transform",`translate(${q(J).left/2+q(J).right/2},${q(J).top})`)),v.append("g").attr("transform",`translate(0, ${Number(a)+Number(q(J).xAxis)})`).call(N(e)).attr("class","x-axis").attr("stroke-width","0"),v.append("g").call(S(s).ticks($).tickFormat(b)).attr("class","y-axis").attr("stroke-width","0"),D(e,o,s)}(),r(16,x=c)))},[u,k,z,o,v,b,c,l,d,m,h,$,O,C,J,i,x,R,function(t){y[t?"unshift":"push"]((()=>{k=t,r(1,k)}))}]}class F 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},z,R,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{F 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        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 tooltipData.show}\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":["t_value","ctx","text","attr","div","div_style_value","top","left","insert","target","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","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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"}
+{"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  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\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    get_current_component(),\n    createEventDispatcher(),\n  );\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 tooltipData.show}\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":["t_value","ctx","text","attr","div","div_style_value","top","left","insert","target","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","width","eventHandler","EventHandler","get_current_component","createEventDispatcher","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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"}