@mozaic-ds/web-components 1.0.0-alpha.0 → 1.0.0-alpha.2

package/public/components/donut/Donut.svelte

@@ -1,439 +0,0 @@
-<svelte:options customElement="m-donut" />
-
-<script lang="ts">
-  import { createEventDispatcher, onMount } from 'svelte';
-
-  import {
-    select,
-    arc as d3Arc,
-    pie as d3Pie,
-    interpolate,
-    type Selection,
-    type PieArcDatum,
-  } from 'd3';
-  import type { DonutData, ChartContext, LegendPosition } from './donut.types';
-  import { EventHandler } from '../../utilities/EventHandler';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-  export let data: string = '';
-  $: parsedData = data ? (JSON.parse(data) as DonutData[]) : [];
-
-  export let svgs: string;
-  $: parsedSvgs = svgs
-    ? (JSON.parse(svgs) as SVGElement[])
-    : ([] as SVGElement[]);
-
-  export let colors: string;
-  $: parsedColors = colors
-    ? JSON.parse(colors)
-    : ['#605F9D', '#D9F0F3', '#EAEDEF', '#0B96CC', '#EA7315', '#EA302D'];
-
-  export let strokes: string;
-  $: parsedStrokes = strokes
-    ? JSON.parse(strokes)
-    : ['#605F9D', '#D9F0F3', '#EAEDEF', '#0B96CC', '#EA7315', '#EA302D'];
-
-  export let title: string;
-  export let legendseparator = ',';
-  export let legendseparatorcount = '(';
-  export let dimension = 250;
-  export let padangle = 0.05;
-  export let backgroundcolor = '#fff';
-  export let delay = 500;
-  export let legendposition: LegendPosition = 'right';
-
-  $: count = parsedData
-    ? parsedData
-        .filter((d) => {
-          return !d.checked;
-        })
-        .reduce((acc, item) => (acc += item.total), 0)
-    : [];
-
-  let chart: HTMLDivElement;
-  let svg: Selection<SVGGElement, PieArcDatum<DonutData>, any, any>;
-
-  let hasMounted = false;
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-
-  let tooltipData = {
-    left: '0px',
-    top: '0px',
-    text: '',
-    show: false,
-  };
-
-  const radius = dimension / 2;
-
-  const arc = d3Arc<PieArcDatum<DonutData>>()
-    .outerRadius(radius - 5)
-    .innerRadius(radius - 60)
-    .padAngle(padangle);
-
-  const pie = d3Pie<DonutData>()
-    .sort(null)
-    .startAngle(1.1 * Math.PI)
-    .endAngle(3.1 * Math.PI)
-    .value((data) => data.total);
-
-  $: if (data.length > 0 && hasMounted) {
-    if (!svg) {
-      svg = select<HTMLElement, PieArcDatum<DonutData>>(chart)
-        .append('svg')
-        .attr('width', dimension)
-        .attr('height', dimension)
-        .append('g')
-        .attr(
-          'transform',
-          'translate(' + dimension / 2 + ',' + dimension / 2 + ')',
-        );
-    } else {
-      svg.selectAll('path').remove();
-    }
-
-    renderChart();
-  }
-
-  const getTotal = () => {
-    return parsedData
-      ? parsedData
-          .filter((d) => {
-            return !d.checked;
-          })
-          .reduce((acc, item) => (acc += item.total), 0)
-      : [];
-  };
-
-  const renderChart = () => {
-    const paths = svg
-      .selectAll('path')
-      .data(pie(parsedData))
-      .enter()
-      .append('path')
-      .attr('class', 'chart__arc')
-      .attr('title', (d) => d.data.name)
-      .attr('stroke', (d) => `${parsedStrokes[d.index]}`)
-      .attr('stroke-width', '4px')
-      .style('fill', (d) => {
-        if (parsedSvgs.length > 0) {
-          return `url(#${d.data.patternId})`;
-        } else if (parsedColors.length > 0) {
-          return `${parsedColors[d.index]}`;
-        }
-        return `${parsedColors[d.index]}`;
-      });
-
-    svg
-      .append('svg:text')
-      .attr('text-anchor', 'middle')
-      .attr('font-size', '28')
-      .attr('fill', '#333')
-      .text(String(count));
-
-    svg
-      .append('svg:text')
-      .attr('text-anchor', 'middle')
-      .attr('font-size', '22')
-      .attr('fill', '#333')
-      .attr('dy', '1.5rem')
-      .text(title);
-
-    paths
-      .transition()
-      .delay((_d, index) => index * delay)
-      .duration(delay)
-      .attrTween('d', (d: PieArcDatum<DonutData>) => {
-        if (d.data.total === 0) return () => '';
-
-        const i = interpolate(d.startAngle + 0.1, d.endAngle);
-        return (t: number) => {
-          d.endAngle = i(t);
-          return arc(d) || '';
-        };
-      });
-
-    paths
-      .on('mousemove', (e: MouseEvent, chartEvent: PieArcDatum<DonutData>) => {
-        tooltipData = {
-          left: e.pageX + 10 + 'px',
-          top: e.pageY - 25 + 'px',
-          text: chartEvent.data.customTooltip
-            ? chartEvent.data.customTooltip
-            : chartEvent.data.name,
-          show: true,
-        };
-      })
-      .on('mouseover', (_e: MouseEvent, chartEvent: PieArcDatum<DonutData>) => {
-        var current = svg.selectAll('.chart__arc').filter(function (arc) {
-          return arc === chartEvent;
-        });
-
-        var others = svg.selectAll('.chart__arc').filter(function (arc) {
-          return arc != chartEvent;
-        });
-
-        others.style('opacity', 0.7);
-        current.style('transform', 'scale(1.02)');
-      })
-      .on('mouseout', (_e: MouseEvent, chartEvent: PieArcDatum<DonutData>) => {
-        var current = svg.selectAll('.chart__arc').filter(function (arc) {
-          return arc === chartEvent;
-        });
-
-        var others = svg.selectAll('.chart__arc').filter(function (arc) {
-          return arc != chartEvent;
-        });
-
-        others.style('opacity', 1);
-        current.style('transform', 'scale(1)');
-        tooltipData.show = false;
-      })
-      .on('click', (_e: MouseEvent, chartEvent: PieArcDatum<DonutData>) => {
-        eventHandler.dispatch('donut-clicked', chartEvent);
-      });
-
-    setTimeout(() => {
-      updateChart(parsedData);
-    }, delay * parsedData.length);
-  };
-
-  function updateChart(data: DonutData[]) {
-    svg
-      .selectAll('path')
-      .data(pie(data))
-      .transition()
-      .duration(delay)
-      .attr('stroke-width', (_d, i) => {
-        return parsedData[i].checked ? '0px' : '4px';
-      })
-      .attrTween('d', function (d: PieArcDatum<DonutData>) {
-        const i: any = interpolate((this as ChartContext)._current, d);
-        (this as ChartContext)._current = i(0);
-        return (t: number) => arc(i(t)) || '';
-      });
-
-    svg
-      .selectAll('svg text')
-      .filter(function () {
-        return /^[0-9]/.test(select(this).text()); // Check if text begin with a "C"
-      })
-      .text(String(getTotal()));
-  }
-
-  function filterChart(name: string) {
-    const updatedData = svg
-      .selectAll('path')
-      .data()
-      .map((d, i) => {
-        const data = (d as PieArcDatum<DonutData>).data;
-        if (data.name === name) {
-          parsedData[i].checked = !parsedData[i].checked;
-          const total = data.total === 0 ? parsedData[i].total : 0;
-          return { ...data, total };
-        }
-        return { ...data };
-      });
-    updateChart(updatedData);
-  }
-
-  function getLegendTextClasses(checked: boolean | undefined) {
-    return `legend__text${checked ? ' legend__text--not-selected' : ''}`;
-  }
-
-  function getFillColor(
-    data: DonutData,
-    index: number,
-    svgs: SVGElement[],
-    colors: [],
-  ) {
-    if (svgs.length > 0) {
-      return `url(#${data.patternId})`;
-    } else if (colors.length > 0) {
-      return parsedColors[index];
-    }
-  }
-
-  function getLegendPosition(legendposition: LegendPosition) {
-    switch (legendposition) {
-      case 'top':
-        return 'chart--top';
-        break;
-      case 'right':
-        return 'chart--right';
-        break;
-      case 'bottom':
-        return 'chart--bottom';
-        break;
-      case 'left':
-        return 'chart--left';
-        break;
-      default:
-        return 'chart--right';
-        break;
-    }
-  }
-
-  onMount(() => (hasMounted = true));
-</script>
-
-<div
-  bind:this={chart}
-  class="chart {getLegendPosition(legendposition)}"
-  style="background-color: {backgroundcolor};"
->
-  <div class="legend">
-    {#each parsedData as data, i}
-      <button class="legend__item" on:click={() => filterChart(data.name)}>
-        <svg class="legend__box">
-          <rect
-            x="0"
-            y="0"
-            width="24"
-            height="16"
-            fill={getFillColor(data, i, parsedSvgs, parsedColors)}
-          />
-        </svg>
-        <div>
-          {#each data.name.split(legendseparator) as name}
-            <p class={getLegendTextClasses(data.checked)}>
-              {name.split(legendseparatorcount)[0]}
-              {#if name.split(legendseparatorcount)[1]}
-                <span class="legend__text--light"
-                  >({name.split(legendseparatorcount)[1]}</span
-                >
-              {/if}
-            </p>
-          {/each}
-        </div>
-      </button>
-    {/each}
-  </div>
-
-  {#if tooltipData.show}
-    <div
-      class="chart__tooltip"
-      style="left: {tooltipData.left}; top: {tooltipData.top};"
-    >
-      {tooltipData.text}
-    </div>
-  {/if}
-</div>
-
-<div style="height: 0; width: 0;" class="pattern">
-  {#each parsedSvgs as svg}
-    {@html svg}
-  {/each}
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/typography/_t.headings';
-
-  .opaque {
-    opacity: 0.7;
-  }
-
-  .chart {
-    display: flex;
-    flex-wrap: wrap;
-    background-color: $color-grey-000;
-    justify-content: center;
-    align-items: center;
-    &--top {
-      flex-direction: column;
-    }
-    &--right {
-      flex-direction: row-reverse;
-    }
-    &--bottom {
-      flex-direction: column-reverse;
-    }
-    &--left {
-      flex-direction: row;
-    }
-    &__tooltip {
-      position: absolute;
-      width: auto;
-      height: auto;
-      background-color: $color-grey-700;
-      border-radius: 4px;
-      color: $color-grey-000;
-      padding: magic-unit-rem(0.5) magic-unit-rem(1);
-      text-align: center;
-    }
-
-    &__arc {
-      cursor: pointer;
-      transition: transform 0.3s ease;
-    }
-  }
-
-  .legend {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 0 magic-unit-rem(1.5);
-    height: 100%;
-    margin: 0;
-    color: $color-grey-999;
-
-    &__title {
-      padding: magic-unit-rem(0.75);
-      white-space: nowrap;
-      margin: 0;
-
-      &--light {
-        color: $color-grey-500;
-      }
-    }
-
-    &__item {
-      cursor: pointer;
-      background: none;
-      border: none;
-      display: flex;
-      flex-direction: row;
-      margin-left: magic-unit-rem(0.75);
-      margin-bottom: magic-unit-rem(0.25);
-      font-size: $size-font-04;
-
-      &:focus,
-      &:hover {
-        outline: 0;
-        text-decoration: underline;
-      }
-    }
-
-    &__box {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: magic-unit-rem(0.75);
-      height: 16px;
-      width: 24px;
-    }
-    &__text {
-      width: fit-content;
-      white-space: nowrap;
-      margin: 0 0 magic-unit-rem(0.25) 0;
-      padding: 0;
-
-      &--light {
-        color: $color-grey-500;
-      }
-
-      &--not-selected {
-        text-decoration: line-through;
-      }
-    }
-  }
-
-  .pattern {
-    z-index: -1;
-    position: absolute;
-  }
-</style>