@mozaic-ds/web-components 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/components/price/Price.svelte

@@ -1,224 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import type { PriceType } from './price.types';
-
-  export let light = false;
-  export let type: PriceType = 'default';
-  export let mainprice: string;
-  export let mainpricearialabel: string | undefined = undefined;
-  export let mainpriceunit: string | undefined = undefined;
-  export let secondarypricelabel: string | undefined = undefined;
-  export let secondarypriceariallabel: string | undefined = undefined;
-  export let flagamount: string | undefined = undefined;
-  export let flaglabel: string | undefined = undefined;
-  export let flagarialabel: string | undefined = undefined;
-  export let priceenddatelabel: string | undefined = undefined;
-  export let pricewithoutoffer: string | undefined = undefined;
-  export let pricewithoutofferarialabel: string | undefined = undefined;
-  export let refundsofferproductlabel: string | undefined = undefined;
-  export let refundsoffermediaurl: string | undefined = undefined;
-
-  $: isDiscount = type === 'destocking' || type === 'commercial-operation';
-  $: isDisplayFlag =
-    type === 'budget-price' ||
-    type === 'best-value' ||
-    type === 'high-quality' ||
-    type === 'star-product';
-</script>
-
-<div
-  class="mc-price {$$props.class}"
-  class:light
-  class:mc-price--discount={isDiscount}
-  {...$$restProps}
->
-  {#if isDisplayFlag}
-    <span class="price__flag--{type}">
-      {flaglabel}
-    </span>
-  {:else if type === 'destocking'}
-    <div class="price__flag--clearance" aria-label={flagarialabel}>
-      <span class="price__flag--clearance-label">{flaglabel}</span>
-      <span class="price__flag--clearance-amount">{flagamount}</span>
-    </div>
-  {:else if type === 'commercial-operation'}
-    <div class="price__flag--discount" aria-label={flagarialabel}>
-      <span class="price__flag--discount-amount">{flagamount}</span>
-      <span class="price__flag--discount-label">{priceenddatelabel}</span>
-    </div>
-  {/if}
-
-  {#if isDiscount}
-    <div class="price__from" aria-label={pricewithoutofferarialabel}>
-      <span class="price__from-without-offer">{pricewithoutoffer}</span>
-    </div>
-  {/if}
-
-  <div class="price">
-    <div class="price__main">
-      <span data-cerberus="ELEM_PRIX" aria-label={mainpricearialabel}>
-        {mainprice}
-      </span>
-      {#if mainpriceunit}
-        <span class="price__main__unit">/ {mainpriceunit}</span>
-      {/if}
-    </div>
-    {#if secondarypricelabel}
-      <span class="price__secondary" aria-label={secondarypriceariallabel}>
-        {secondarypricelabel}
-      </span>
-    {/if}
-  </div>
-
-  {#if !light && refundsofferproductlabel}
-    {#if refundsoffermediaurl}
-      <a
-        class="mc-tag-link mc-tag-link__label"
-        href={refundsoffermediaurl}
-        target="_blank"
-        >{refundsofferproductlabel}
-      </a>
-    {:else}
-      <span class="mc-tag-text mc-tag-text--danger mc-tag-text__label">
-        {refundsofferproductlabel}
-      </span>
-    {/if}
-  {/if}
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/c.tag';
-
-  .mc-price {
-    .price__flag {
-      &--budget-price,
-      &--best-value,
-      &--high-quality,
-      &--star-product {
-        @include set-font-face('semi-bold');
-        @include set-font-scale('02', 'm');
-        display: inline-block;
-        padding: $mu050;
-        margin-bottom: $mu025;
-        line-height: 0.5rem;
-        text-transform: uppercase;
-      }
-      &--budget-price {
-        background-color: $color-secondary-yellow-500;
-      }
-      &--best-value {
-        background-color: $color-primary-01-500;
-      }
-      &--high-quality {
-        background-color: $color-secondary-blue-500;
-      }
-      &--star-product {
-        padding: $mu025 $mu050;
-        line-height: 1rem;
-        color: #fff;
-        text-transform: none;
-        background-color: $color-secondary-red-500;
-      }
-      &--clearance {
-        display: flex;
-        &-label {
-          @include set-font-scale('05', 'm');
-          display: inline-block;
-          vertical-align: middle;
-          padding: calc(#{$mu025} - 1px) $mu050;
-          border: get-border(s) solid $color-secondary-red-500;
-          line-height: 1.25rem;
-          text-transform: uppercase;
-          color: $color-secondary-red-500;
-        }
-        &-amount {
-          @include set-font-face('semi-bold');
-          @include set-font-scale('05', 'm');
-          display: inline-block;
-          vertical-align: middle;
-          padding: $mu025 $mu050;
-          background-color: $color-secondary-red-500;
-          color: $color-secondary-yellow-500;
-          line-height: 1.25rem;
-        }
-      }
-      &--discount {
-        &-amount {
-          @include set-font-face('semi-bold');
-          @include set-font-scale('05', 'm');
-          display: inline-block;
-          vertical-align: middle;
-          padding: $mu025 $mu050;
-          background-color: $color-secondary-red-500;
-          line-height: 1.25rem;
-          color: #fff;
-        }
-        &-label {
-          @include set-font-scale('02', 'm');
-          display: inline-block;
-          vertical-align: middle;
-          margin-left: $mu050;
-          color: $color-secondary-red-500;
-        }
-      }
-    }
-    .price__from {
-      line-height: 1.75rem;
-      &-without-offer {
-        @include set-font-scale('04', 'm');
-        display: inline-block;
-        vertical-align: middle;
-        color: $color-grey-999;
-        text-decoration: line-through;
-      }
-    }
-    .price__main {
-      @include set-font-face('semi-bold');
-      @include set-font-scale('09', 'm');
-      &__unit {
-        @include set-font-scale('05', 'm');
-      }
-    }
-    .price__secondary {
-      @include set-font-scale('02', 'm');
-      color: $color-grey-900;
-    }
-
-    &.mc-price--discount {
-      .price__main {
-        color: $color-secondary-red-500;
-      }
-    }
-
-    &.light {
-      .price__flag {
-        &--budget-price,
-        &--best-value,
-        &--high-quality {
-          padding: $mu025;
-          line-height: 0.75rem;
-        }
-        &--clearance {
-          display: flex;
-          &-label {
-            @include set-font-scale('02', 'm');
-            line-height: 0.75rem;
-          }
-          &-amount {
-            @include set-font-scale('02', 'm');
-            line-height: 0.75rem;
-            padding: calc(#{$mu025} - 1px) $mu025;
-          }
-        }
-      }
-      .price__main {
-        @include set-font-scale('07', 'm');
-        &__unit {
-          @include set-font-scale('04', 'm');
-        }
-      }
-    }
-  }
-</style>

package/dist/components/price/price.types.d.ts

@@ -1,2 +0,0 @@
-export type PriceType = 'default' | 'budget-price' | 'best-value' | 'high-quality' | 'star-product' | 'destocking' | 'commercial-operation';
-//# sourceMappingURL=price.types.d.ts.map

package/dist/components/price/price.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"price.types.d.ts","sourceRoot":"","sources":["../../../src/components/price/price.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,cAAc,GACd,YAAY,GACZ,cAAc,GACd,cAAc,GACd,YAAY,GACZ,sBAAsB,CAAC"}

package/dist/components/progressbar/ProgressBar.js

@@ -1,2 +0,0 @@
-import{S as e,i as r,a as s,b as a,f as t,s as i,c as n,e as o,n as c,h as l,M as p,j as m,k as d,l as g,m as u,o as b,u as x,v as h,y as v}from"../../index-c222d0b7.js";function f(e){let r,s,t,i=(e[0]??0)+"";return{c(){r=o("div"),s=h(i),t=h("%"),l(r,"class","mc-progressbar__percentage")},m(e,i){a(e,r,i),d(r,s),d(r,t)},p(e,r){1&r&&i!==(i=(e[0]??0)+"")&&v(s,i)},d(e){e&&u(r)}}}function $(e){let r,s,t,i=e[3]&&f(e),b=[{class:t=e[5](e[3])+" "+e[6].class},e[7]],x={};for(let e=0;e<b.length;e+=1)x=n(x,b[e]);return{c(){r=o("div"),s=o("div"),i&&i.c(),this.c=c,l(s,"class","mc-progressbar__indicator"),l(s,"role","progressbar"),l(s,"aria-valuenow",e[0]),l(s,"aria-valuemin",e[1]),l(s,"aria-valuemax",e[2]),p(s,"width",e[4]+"%"),m(r,x)},m(e,t){a(e,r,t),d(r,s),i&&i.m(s,null)},p(e,[a]){e[3]?i?i.p(e,a):(i=f(e),i.c(),i.m(s,null)):i&&(i.d(1),i=null),1&a&&l(s,"aria-valuenow",e[0]),2&a&&l(s,"aria-valuemin",e[1]),4&a&&l(s,"aria-valuemax",e[2]),16&a&&p(s,"width",e[4]+"%"),m(r,x=g(b,[72&a&&t!==(t=e[5](e[3])+" "+e[6].class)&&{class:t},128&a&&e[7]]))},i:c,o:c,d(e){e&&u(r),i&&i.d()}}}function w(e,r,s){let a;const t=["value","valuemin","valuemax","displaypercentage","size"];let i=b(r,t),{value:o}=r,{valuemin:c=0}=r,{valuemax:l=100}=r,{displaypercentage:p}=r,{size:m="m"}=r;return e.$$set=e=>{s(6,r=n(n({},r),x(e))),s(7,i=b(r,t)),"value"in e&&s(0,o=e.value),"valuemin"in e&&s(1,c=e.valuemin),"valuemax"in e&&s(2,l=e.valuemax),"displaypercentage"in e&&s(3,p=e.displaypercentage),"size"in e&&s(8,m=e.size)},e.$$.update=()=>{5&e.$$.dirty&&s(4,a=o>=l?l:o)},r=x(r),[o,c,l,p,a,function(e){const r=["mc-progressbar"];return e&&r.push("mc-progressbar--percent"),"s"===m?r.push("mc-progressbar--s"):"xs"===m&&r.push("mc-progressbar--xs"),r.join(" ")},r,i,m]}class y extends e{constructor(e){super();const n=document.createElement("style");n.textContent='.mc-progressbar{font-family:"LeroyMerlin", sans-serif;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#cfd2d8;display:-webkit-box;display:-ms-flexbox;display:flex;height:0.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative}.mc-progressbar,.mc-progressbar *{-webkit-box-sizing:border-box;box-sizing:border-box}.mc-progressbar,.mc-progressbar__indicator{border-radius:4px;overflow:hidden}.mc-progressbar__indicator{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#494f60;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;left:0;min-width:2.3125rem;padding:0.125rem;position:absolute;-webkit-transition:width 0.4s ease;transition:width 0.4s ease;top:0}.mc-progressbar--static .mc-progressbar__indicator{-webkit-transition:none;transition:none}.mc-progressbar__percentage{font-size:0.75rem;line-height:1.3333333333;font-weight:600;background-color:#ffffff;border-radius:1rem;color:#494f60;padding:0.125rem 0.5rem}.mc-progressbar:not(.mc-progressbar--percent) .mc-progressbar__percentage{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;visibility:visible;white-space:nowrap}.mc-progressbar--xs{height:0.125rem}.mc-progressbar--xs,.mc-progressbar--xs .mc-progressbar__indicator{border-radius:1px}.mc-progressbar--s{height:0.25rem}.mc-progressbar--s,.mc-progressbar--s .mc-progressbar__indicator{border-radius:2px}.mc-progressbar--percent{height:1.5rem}.mc-progressbar--percent,.mc-progressbar--percent .mc-progressbar__indicator{border-radius:12px}.mc-progressbar__percentage{min-width:2.0625rem}',this.shadowRoot.appendChild(n),r(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},w,$,i,{value:0,valuemin:1,valuemax:2,displaypercentage:3,size:8},null),e&&(e.target&&a(e.target,this,e.anchor),e.props&&(this.$set(e.props),t()))}static get observedAttributes(){return["value","valuemin","valuemax","displaypercentage","size"]}get value(){return this.$$.ctx[0]}set value(e){this.$$set({value:e}),t()}get valuemin(){return this.$$.ctx[1]}set valuemin(e){this.$$set({valuemin:e}),t()}get valuemax(){return this.$$.ctx[2]}set valuemax(e){this.$$set({valuemax:e}),t()}get displaypercentage(){return this.$$.ctx[3]}set displaypercentage(e){this.$$set({displaypercentage:e}),t()}get size(){return this.$$.ctx[8]}set size(e){this.$$set({size:e}),t()}}export{y as default};
-//# sourceMappingURL=ProgressBar.js.map

package/dist/components/progressbar/ProgressBar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/progressbar/ProgressBar.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { ProgressBarSize } from './progressbar.types';\n\n  export let value: number;\n  export let valuemin = 0;\n  export let valuemax = 100;\n  export let displaypercentage: boolean;\n  export let size: ProgressBarSize = 'm';\n\n  $: getWidth = value >= valuemax ? valuemax : value;\n\n  function getClasses(displaypercentage: boolean): string {\n    const classes = ['mc-progressbar'];\n\n    if (displaypercentage) {\n      classes.push('mc-progressbar--percent');\n    }\n\n    if (size === 's') {\n      classes.push('mc-progressbar--s');\n    } else if (size === 'xs') {\n      classes.push('mc-progressbar--xs');\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div class=\"{getClasses(displaypercentage)} {$$props.class}\" {...$$restProps}>\n  <div\n    class=\"mc-progressbar__indicator\"\n    role=\"progressbar\"\n    aria-valuenow={value}\n    aria-valuemin={valuemin}\n    aria-valuemax={valuemax}\n    style=\"width: {getWidth}%\"\n  >\n    {#if displaypercentage}\n      <div class=\"mc-progressbar__percentage\">{value ?? 0}%</div>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.progressbar';\n\n  .mc-progressbar__percentage {\n    min-width: px-to-rem(33);\n  }\n</style>\n"],"names":["t0_value","ctx","insert","target","div","anchor","dirty","set_data","t0","create_if_block","class","div1_class_value","div1","append","div0","value","$$props","valuemin","valuemax","displaypercentage","size","$$invalidate","getWidth","classes","push","join"],"mappings":"kMAwC+CA,GAAAC,MAAS,GAAC,oCAAC,uDAApDC,EAA0DC,EAAAC,EAAAC,yBAAjB,EAAAC,GAAAN,KAAAA,GAAAC,MAAS,GAAC,KAAAM,EAAAC,EAAAR,6CADhDC,EAAiB,IAAAQ,EAAAR,OATbS,MAAAC,EAAAV,EAAW,GAAAA,EAAqB,IAAA,IAAAA,KAAQS,OAAYT,EAAW,2LAIzDA,EAAK,wBACLA,EAAQ,wBACRA,EAAQ,gBACRA,EAAQ,GAAA,oBAP3BC,EAaKC,EAAAS,EAAAP,GAZHQ,EAWKD,EAAAE,4BAHEb,EAAiB,qFALPA,EAAK,6BACLA,EAAQ,6BACRA,EAAQ,sBACRA,EAAQ,GAAA,gBAPd,GAAAK,GAAAK,KAAAA,EAAAV,EAAW,GAAAA,EAAqB,IAAA,IAAAA,KAAQS,QAAK,CAAAA,MAAAC,UAAOV,EAAW,sJAzB/Dc,GAAaC,GACbC,SAAAA,EAAW,GAACD,GACZE,SAAAA,EAAW,KAAGF,qBACdG,GAA0BH,GAC1BI,KAAAA,EAAwB,KAAGJ,wQAErCK,EAAA,EAAEC,EAAWP,GAASG,EAAWA,EAAWH,sBAEpC,SAAWI,GACZ,MAAAI,GAAW,yBAEbJ,GACFI,EAAQC,KAAK,2BAGF,MAATJ,EACFG,EAAQC,KAAK,qBACK,OAATJ,GACTG,EAAQC,KAAK,sBAGRD,EAAQE,KAAK"}

package/dist/components/progressbar/ProgressBar.svelte

@@ -1,53 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import type { ProgressBarSize } from './progressbar.types';
-
-  export let value: number;
-  export let valuemin = 0;
-  export let valuemax = 100;
-  export let displaypercentage: boolean;
-  export let size: ProgressBarSize = 'm';
-
-  $: getWidth = value >= valuemax ? valuemax : value;
-
-  function getClasses(displaypercentage: boolean): string {
-    const classes = ['mc-progressbar'];
-
-    if (displaypercentage) {
-      classes.push('mc-progressbar--percent');
-    }
-
-    if (size === 's') {
-      classes.push('mc-progressbar--s');
-    } else if (size === 'xs') {
-      classes.push('mc-progressbar--xs');
-    }
-
-    return classes.join(' ');
-  }
-</script>
-
-<div class="{getClasses(displaypercentage)} {$$props.class}" {...$$restProps}>
-  <div
-    class="mc-progressbar__indicator"
-    role="progressbar"
-    aria-valuenow={value}
-    aria-valuemin={valuemin}
-    aria-valuemax={valuemax}
-    style="width: {getWidth}%"
-  >
-    {#if displaypercentage}
-      <div class="mc-progressbar__percentage">{value ?? 0}%</div>
-    {/if}
-  </div>
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/c.progressbar';
-
-  .mc-progressbar__percentage {
-    min-width: px-to-rem(33);
-  }
-</style>

package/dist/components/progressbar/progressbar.types.d.ts

@@ -1,2 +0,0 @@
-export type ProgressBarSize = 'm' | 's' | 'xs';
-//# sourceMappingURL=progressbar.types.d.ts.map

package/dist/components/progressbar/progressbar.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"progressbar.types.d.ts","sourceRoot":"","sources":["../../../src/components/progressbar/progressbar.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC"}

package/dist/components/radar/Radar.svelte

@@ -1,384 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  // @ts-nocheck
-  import { onMount } from 'svelte';
-
-  import {
-    select,
-    scaleLinear,
-    Selection,
-    line,
-    symbolTriangle,
-    symbolCircle,
-    symbol,
-    symbolSquare,
-    symbolDiamond,
-    symbolStar,
-  } from 'd3';
-  import type { RadarData } from './radar.types';
-  import { EventHandler } from '../../utilities/EventHandler';
-  export let data: string = '';
-  $: parsedData = data ? (JSON.parse(data) as RadarData[]) : [];
-  export let backgroundcolor = '#fff';
-  export let delay = 500;
-  export let sides = 5;
-  export let levels = 10;
-  export let valuemax = 20;
-  export let scalemax = 20;
-  export let hasgrades = false;
-  // Interne variable
-  const symbolPath = [
-    symbol(symbolSquare),
-    symbol(symbolCircle),
-    symbol(symbolTriangle),
-    symbol(symbolDiamond),
-    symbol(symbolStar),
-  ];
-
-  const colors = ['#605F9D', '#00919F', '#758992', '#0B96CC'];
-
-  let chart: HTMLDivElement;
-  let svg: Selection<SVGGElement, any, any, any>;
-
-  let hasMounted = false;
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-
-  let tooltipData = {
-    left: '0px',
-    top: '0px',
-    text: [],
-    title: '',
-    show: false,
-  };
-
-  let size = Math.min(window.innerWidth, window.innerHeight, 400);
-  let offset = Math.PI;
-  let polyangle = (Math.PI * 2) / sides;
-  let r = 0.8 * size;
-  let radius = r / 2;
-  let center = {
-    x: size / 2,
-    y: size / 2,
-  };
-
-  $: dataset = data ? (JSON.parse(data) as RadarData[]) : ([] as RadarData[]);
-  $: scale = scaleLinear().domain([0, scalemax]).range([0, radius]);
-  // Interne methods
-  const getPoint = (length: number, angle: number) => {
-    const point = {
-      x: center.x + length * Math.sin(offset - angle),
-      y: center.y + length * Math.cos(offset - angle),
-    };
-    return point;
-  };
-
-  const graduations = (levels: number): Array<number | string> => {
-    const grades = [];
-    const step = valuemax / levels;
-    for (let i = 0; i <= levels; i++) {
-      const num = step * i;
-      if (Number.isInteger(step)) {
-        grades.push(Number(num));
-      } else {
-        grades.push(num.toFixed(2));
-      }
-    }
-    return grades;
-  };
-
-  const getPath = (points: Array<any>, parent: any) => {
-    const lineGenerator = line()
-      .x((d) => d.x)
-      .y((d) => d.y);
-
-    parent.append('path').attr('d', lineGenerator(points));
-  };
-
-  const getAxis = (ticks: Array<number | string>, levels: number) => {
-    const radarLines = svg.append('g').attr('class', 'radar-lines');
-    const point = getPoint(radius, 0);
-    getPath([center, point], radarLines);
-
-    const gradeLabel = svg.append('g').attr('class', 'ticks');
-
-    ticks.forEach((grade, i) => {
-      const r = (i / levels) * radius;
-      const p = getPoint(r, 0);
-      const points = [
-        p,
-        {
-          ...p,
-          x: p.x - 10,
-        },
-      ];
-      getPath(points, radarLines);
-      if (hasgrades) {
-        getText(grade, p, true, gradeLabel);
-      }
-    });
-  };
-
-  const getLevels = (levels: number, sides: number) => {
-    for (let level = 1; level <= levels; level++) {
-      const hyp = (level / levels) * radius;
-
-      const points = [];
-      for (let vertex = 0; vertex < sides; vertex++) {
-        const angle = vertex * polyangle;
-
-        points.push(getPoint(hyp, angle));
-      }
-      const svgLevel = svg
-        .append('g')
-        .style('fill', 'none')
-        .attr('stroke', '#CCCCCC');
-      getPath([...points, points[0]], svgLevel);
-    }
-  };
-
-  const getLines = (sides: number) => {
-    for (let vertex = 1, i = 0; vertex <= sides; vertex++, i++) {
-      const svgLine = svg.append('g').attr('stroke', '#ccc');
-      const angle = vertex * polyangle;
-      const formatdata = () => {
-        const tooltipData = dataset.map((elem: RadarData, dataIndex) => {
-          let elemPrincipal = elem[vertex];
-          if (dataset[0][vertex].name === elemPrincipal.name) {
-            return {
-              name: `Serie ${dataIndex + 1}`,
-              value: elemPrincipal.value,
-            };
-          }
-          return undefined;
-        });
-        return tooltipData;
-      };
-
-      svgLine.on('mouseover', (_e: MouseEvent) => {
-        svgLine.attr('stroke-dasharray', '4');
-        svgLine.attr('stroke-width', '4px');
-        tooltipData = {
-          left: _e.pageX + 10 + 'px',
-          title: dataset[0][i + 1].name,
-          top: _e.pageY - 25 + 'px',
-          text: formatdata(),
-          show: true,
-        };
-      });
-
-      svgLine.on('mouseout', (_e: MouseEvent) => {
-        svgLine.attr('stroke-dasharray', 0);
-        svgLine.attr('stroke-width', '1px');
-        tooltipData = {
-          left: _e.pageX + 10 + 'px',
-          top: _e.pageY - 25 + 'px',
-          show: false,
-          text: [],
-          title: '',
-        };
-      });
-
-      svgLine.on('click', (_e, chartEvent) => {
-        eventHandler.dispatch('serie-clicked', chartEvent);
-      });
-      const point = getPoint(radius, angle);
-      getPath([center, point], svgLine);
-    }
-  };
-
-  const getSymbols = (points, colors, index) => {
-    svg
-      .selectAll()
-      .data(points)
-      .enter()
-      .append('path')
-      .attr('fill', '#FFF')
-      .attr('stroke', colors[index])
-      .attr('stroke-width', '2px')
-      .attr('d', symbolPath[index].size(50))
-      .attr('opacity', 0.4)
-      .attr('transform', (d) => `translate(${d.x},${d.y})`);
-  };
-
-  const getData = (dataset, side, index) => {
-    let points = [];
-    dataset.forEach((d, i) => {
-      const len = scale(d.value);
-      const theta = i * ((2 * Math.PI) / side);
-
-      points.push({
-        ...getPoint(len, theta),
-        value: 'hihihi',
-      });
-    });
-
-    const group = svg
-      .append('g')
-      .attr('stroke', colors[index])
-      .attr('stroke-width', '1.5px')
-      .attr('fill-opacity', '0.2')
-      .attr('fill', colors[index]);
-
-    group.on('mousemove', (_e: MouseEvent) => {
-      tooltipData = {
-        left: _e.pageX + 10 + 'px',
-        title: `Serie-${index}`,
-        top: _e.pageY - 25 + 'px',
-        text: dataset,
-        show: true,
-      };
-      group.attr('fill-opacity', '0.6');
-    });
-
-    group.on('mouseout', (_e: MouseEvent) => {
-      tooltipData = {
-        left: '0px',
-        top: '0px',
-        text: [],
-        title: '',
-        show: false,
-      };
-      group.attr('fill-opacity', '0.2');
-    });
-
-    getPath([...points, points[0]], group);
-    getSymbols(points, colors, index);
-  };
-
-  const getText = (text, point, isAxis, group) => {
-    if (isAxis) {
-      // Add rect background
-      group
-        .append('text')
-        .attr('x', point.x)
-        .attr('y', point.y)
-        .html(text)
-        .style('text-anchor', 'middle')
-        .attr('fill', '#3A3936')
-        .style('font-size', '11px');
-    } else {
-      group
-        .append('text')
-        .attr('x', point.x)
-        .attr('y', point.y)
-        .html(text)
-        .style('text-anchor', 'middle')
-        .attr('fill', '#3A3936')
-        .style('font-size', '12px');
-    }
-  };
-
-  const drawLabels = (dataset, sides: number) => {
-    const groupL = svg.append('g').attr('class', 'labels');
-    for (let vertex = 0; vertex < sides; vertex++) {
-      const angle = vertex * polyangle;
-      const label = dataset[vertex].name;
-      const point = getPoint(0.9 * (size / 2), angle);
-      getText(label, point, false, groupL);
-    }
-  };
-
-  $: if (data.length > 0 && hasMounted) {
-    svg = select(chart)
-      .append('svg')
-      .attr('width', size)
-      .attr('height', size)
-      .append('g');
-
-    renderChart();
-  }
-
-  const renderChart = () => {
-    const ticks = graduations(levels);
-    getLevels(levels, sides);
-    getAxis(ticks, levels);
-    getLines(sides);
-    dataset.forEach((dataValue, index) => {
-      getData(dataValue, sides, index);
-      drawLabels(dataValue, sides);
-    });
-
-    setTimeout(() => {
-      updateChart(parsedData);
-    }, delay * parsedData.length);
-  };
-
-  function updateChart(data: RadarData[]) {
-    getLines(sides);
-    data.forEach((dataValue, index) => {
-      getData(dataValue, sides, index);
-      drawLabels(dataValue, sides);
-    });
-  }
-
-  onMount(() => (hasMounted = true));
-</script>
-
-<div
-  bind:this={chart}
-  class="chart"
-  style="background-color: {backgroundcolor};"
->
-  {#if tooltipData.show}
-    <div
-      class="chart__tooltip"
-      style="left: {tooltipData.left}; top: {tooltipData.top};"
-    >
-      <span><b>{tooltipData.title}</b></span>
-      <div>
-        {#each tooltipData.text as data}
-          {#if data.customtooltip}
-            <div class="chart__list">
-              <span class="chart__elem">{data.customtooltip}</span>
-            </div>
-          {:else}
-            <div class="chart__list">
-              <span class="chart__legend">{data.name}</span>
-              <span class="chart__elem">{data.value}</span>
-            </div>
-          {/if}
-        {/each}
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/typography/_t.headings';
-
-  .chart {
-    display: flex;
-    flex-wrap: wrap;
-    background-color: $color-grey-000;
-    justify-content: center;
-    align-items: center;
-
-    &__tooltip {
-      position: absolute;
-      width: auto;
-      height: auto;
-      background-color: white;
-      border: 1px solid #000;
-      border-radius: 4px;
-      min-width: 152px;
-      color: grey;
-
-      padding: magic-unit-rem(0.25) magic-unit-rem(0.5);
-    }
-
-    &__list {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-    }
-  }
-
-  .chart circle {
-    cursor: pointer;
-  }
-</style>