`AutomaticScan.svelte` omzetten in Atomic Design

[SamaraFellaDina]

• zie https://github.com/SamaraFellaDina/future-ready-design/issues/46 door volledige uitleg

omzetten naar Atomic design

Hoe ga ik dit component omzetten naar een atomic design

Atoms

Wat zijn allemaal atoms?

Dit component bestaat eigenlijk uit 3 atomen:

• een h2
• een p
• en een canvas die een grafiek bevat

[SamaraFellaDina]

h2

Ik was begonnen met de h2, daarbij dacht ik: laat ik een heading library maken waarbij hij de juiste heading ophaalt die je nodig hebt. Ik ben alleen nog aan het kijken hoe ik deze data dynamisch maak, maar dit is de eerste schets van het idee:

<script>
  export let name = ''

</script>

{#if name == 'automatisch-scan-resultaat'}
  <h2>automatisch scan resultaat</h2>

{:else if name == 'soorten-foutmeldingen'}
  <h2>soorten foutmeldingen</h2>

{/if}

[SamaraFellaDina]

Ik had eerst de mappen goed gezet, aangezien die eerst goed moeten staan zie commit hierboven.

icon.svelte

Tijdens het aanpassen van de mappenstructuur, liep ik tegen het probleem aan dat de icon.svelte steeds foutmeldingen aangaf waarbij het onder andere een probleem was dat het niet geschikt was voor ssr. Daarnaast zag ik dat componenten die gebruik maakte van de library niet naar de index.js werden gestuurd. wat er dus voor zorgt dat hij de hele library inlaad (not really PE). Dit ging er dus mis:

• de componenten waren niet op een goede manier gelinked aan de library
• de library werd niet goed weergeven in de index.

Hoe heb je het opgelost

na uren strijden (en beetje huilen), had ik naar de code van Justus gekeken. hier staat hoe hij de library heeft gemaakt, dat heeft onze code geïnspireerd. daarnaast had ik gekeken hoe hij deze refereert in verschillende componenten.

hier kan je zien dat hij een referentie maakt naar de index.js ipv de $lib, door dit te wijzigen laadde de website gelukkig wel

en nu ga ik verder aan m’n opdracht

[SamaraFellaDina]

Nadat @J3SS3HVA mij wat advies gaf over mijn huidige schets, heb ik inderdaad gekozen om de h2 en p los in het organismen te doen, aangezien dit statisch is. maar ik wil er nog wel in verdiepen

[SamaraFellaDina]

grafiek

Hoe zit de grafiek in elkaar?

door een breakdown te maken van de code, kom ik hier op uit:

• de canvas en de figcaption zijn allebei atoms
• de `figure is een molecule, omdat het samen een groep creëert.

[SamaraFellaDina]

De section van de grafiek ziet er nu zo uit:

<section>
    <h2>{result.title}</h2>
    <p>{result.description}</p>
    <DonutChart {result}/>
</section>

Hierin zit dus nog een component waarin de grafiek word geïmporteerd

<script>
  import { onMount } from "svelte";
  import Chart from "chart.js/auto";
  export let result = data.scans;

  let chart;
  let percentage = result.score;

  onMount(() => {
    let doughnutColor = percentage < 50 ? '#c30010' : percentage < 80 ? '#faa800' : '#228b22';
    let doughnutColorAlt = doughnutColor + "33";

    const data = {
      datasets: [
        {
          label: "Percentage",
          data: [percentage, 100 - percentage],
          backgroundColor: [doughnutColor, doughnutColorAlt],
          borderWidth: 0,
          cutout: "75%",
        },
      ],
    };

    const options = {
      plugins: {
        datalabels: {
          display: false,
        },
        tooltip: {
          enabled: false, // Enable tooltips
        },
      },
      responsive: false,
      maintainAspectRatio: true,
    };

    const ctx = document.getElementById("doughnut-chart").getContext("2d");
    chart = new Chart(ctx, {
      type: "doughnut",
      data: data,
      options: options,
    });
  });
</script>

<figure>
  <canvas id="doughnut-chart" height="150" width="150"></canvas>
  <figcaption>{percentage}%</figcaption>
</figure>

<style>
    canvas {
    max-width: 100%;
    height: auto;
  }

  figcaption {
    position: absolute;
    font-size: 2em;
    top: 52%;
    left: 50%; 
    transform: translate(-50%, -50%);
    font-weight: 700;
  }

  figure {
    position: relative;
    width: 100%;
    max-width: fit-content;
    height: min-content;
    align-self: center;

    @media screen and (max-width: 700px) {
      margin-top: 50px;
    }
  }

</style>

Wat zijn je opmerkingen?

• moet ik het nog kleiner indelen, Als in hoe ga ik dit als atomen indelen? De data zit hier namelijk zo aan gekoppeld
• Is er een andere manier hoe ik de data kan inladen?

[SamaraFellaDina]

Voor nu ga ik even verder met #39

• [ ] #39

[J3SS3HVA]

Netjes beschreven klopt het trouwens dat dat grote stuk code waarin de chart wort gemaakt een component file is met de naam DonutChart.svelte.

wat je hebt beschreven over wat een atoom is en wat een molecuul is heb je ook goed gedaan