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

package/public/components/radar/Radar.svelte

@@ -1,386 +0,0 @@
-<svelte:options customElement='' />
-
-<script lang="ts">
-  // @ts-nocheck
-  import { createEventDispatcher, onMount } from 'svelte';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-
-  import {
-    select,
-    scaleLinear,
-    type 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>

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

@@ -1,2 +0,0 @@
-export type RatingsSize = 's' | 'm' | 'l' | 'xl';
-//# sourceMappingURL=ratings.types.d.ts.map

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

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

package/public/components/segmentedcontrol/SegmentedControl.svelte

@@ -1,61 +0,0 @@
-<svelte:options customElement="" />
-
-<script lang="ts">
-  import type { itemsType } from './segmentedControl.types';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import { createEventDispatcher } from 'svelte';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-  export let items: string;
-  export let selected: string;
-  export let size: string;
-  export let full = false;
-  $: segments = items ? (JSON.parse(items) as itemsType[]) : [];
-  $: segmentSelected = selected ? Number(selected) : '';
-
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-
-  function manageSegment(index: any, segment: any) {
-    segmentSelected = index;
-    eventHandler.dispatch('segment-selected', {
-      index,
-      segment,
-    });
-  }
-</script>
-
-<div
-  class="mc-segmented-control"
-  class:mc-segmented-control--m={size === 'm'}
-  class:mc-segmented-control--full={full}
->
-  {#each segments as segment, index}
-    <button
-      type="button"
-      class="mc-segmented-control__segment"
-      class:is-active={segmentSelected === index}
-      class:is-disabled={segment.disabled}
-      on:click={() => manageSegment(index, segment)}
-    >
-      <span class="mc-segmented-control__content">
-        {#if index === segmentSelected}
-          <span class="mc-segmented-control__icon" />
-        {/if}
-        <span class="mc-segmented-control__label">
-          {segment.label}
-        </span>
-      </span>
-    </button>
-  {/each}
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/all-settings';
-  .mc-segmented-control__content {
-    box-sizing: border-box;
-  }
-  @import '@mozaic-ds/styles/components/c.segmented-control';
-</style>

package/public/components/segmentedcontrol/segmentedControl.types.d.ts

@@ -1,9 +0,0 @@
-export interface itemsType {
-    label: string;
-    id?: string | undefined;
-    name?: string | undefined;
-    value?: string;
-    disabled?: boolean | undefined;
-    full?: boolean | undefined;
-}
-//# sourceMappingURL=segmentedControl.types.d.ts.map

package/public/components/segmentedcontrol/segmentedControl.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"segmentedControl.types.d.ts","sourceRoot":"","sources":["../../../src/components/segmentedcontrol/segmentedControl.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC5B"}