Chart color and symbol legend.

  --color-not-found: #ad7e79;

  --color-no-snow: #6696c3;

  --color-normal: #555555;

  --color-average: #5d8283;

}

.icon {

<template>

  <div class="card">

    <table>

      <caption style="font-weight: bold;">

        Legend

      </caption>

      <tr>

        <td>

          ●

        </td>

        <td>

          Available snow height on a stick.

        </td>

      </tr>

      <tr>

        <td>

          ✕

        </td>

        <td>

          Missing snow height for a stick.

        </td>

      </tr>

    </table>

  <div class="card legend-container">

    <checkbox-blank-circle-icon class="small-icon manual" />

    <div>Manually edited image</div>

    <close-icon class="small-icon manual" />

    <div>Manually discarded stake</div>

    <close-icon class="small-icon discard" />

    <div>Discarded image</div>

    <checkbox-blank-circle-icon class="small-icon not-found" />

    <div>Stake not found</div>

    <checkbox-blank-circle-icon class="small-icon no-snow" />

    <div>Found no snow in the image</div>

    <checkbox-blank-circle-icon class="small-icon normal" />

    <div>Stake found</div>

    <chart-line-variant-icon class="small-icon average" />

    <div>Snow height moving average</div>

  </div>

</template>

<script>

import CloseIcon from 'icons/Close'

import CheckboxBlankCircleIcon from 'icons/CheckboxBlankCircle'

import ChartLineVariantIcon from 'icons/ChartLineVariant'

export default {

  name: 'Legend'

  name: 'Legend',

  components: {

    CloseIcon,

    CheckboxBlankCircleIcon,

    ChartLineVariantIcon

  }

}

</script>

<style scoped></style>

<style scoped>

.legend-container {

  display: grid;

  grid-gap: 10px;

  grid-template-columns: auto 220px;

  align-items: center;

  padding: 10px;

}

.small-icon svg {

  width: 15px;

  height: 15px;

}

.manual svg {

  fill: var(--color-manually-edited);

}

.discard svg {

  fill: var(--color-discarded);

}

.not-found svg {

  fill: var(--color-not-found);

}

.no-snow svg {

  fill: var(--color-no-snow);

}

.normal svg {

  fill: var(--color-normal);

}

.average svg {

  fill: var(--color-average);

}

</style>