@iamproperty/components 7.7.1--beta4 → 7.7.1--beta6

package/assets/sass/components/charts.scss

@@ -1,1298 +1,1298 @@
-@use 'sass:map';
-
-@use '../_func' as *;
-
-$chart-colour-1: #1ebee6 !default;
-$chart-colour-2: #ffd2d2 !default;
-$chart-colour-3: #b4e6a5 !default;
-$chart-colour-4: #ffa500 !default;
-$chart-colour-5: #46003c !default;
-$chart-colour-6: #b4e6a5 !default;
-$chart-colour-7: #1ebee6 !default;
-$chart-colour-8: #ffd2d2 !default;
-$chart-colour-9: #9d9d9d !default;
-$chart-colour-10: #66838a !default;
-
-$chart-colors: ();
-$chart-colors: map.merge(
-  (
-    1: $chart-colour-1,
-    2: $chart-colour-2,
-    3: $chart-colour-3,
-    4: $chart-colour-4,
-    5: $chart-colour-5,
-    6: $chart-colour-6,
-    7: $chart-colour-7,
-    8: $chart-colour-8,
-    9: $chart-colour-9,
-    10: $chart-colour-10,
-  ),
-  $chart-colors
-);
-
-$chart-height: 56.25% !default;
-$chart-height-lg: 42.86% !default;
-
-// Selectors
-$default-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__wrapper';
-$bar-chart: 'input[type=radio]:is([value="bar"],[value="comparison"]):not([value=none]):not([value=pie]):checked~.chart__wrapper';
-
-//$comparison-chart: 'input[type=radio][value="comparison"]:not([value=none]):not([value=pie]):checked~.chart__wrapper';
-//$comparison-chart-key: 'input[type=radio][value="comparison"]:not([value=none]):not([value=pie]):checked~.chart__key';
-
-$responsive-chart: 'input[type=radio][value="responsive"]:not([value=none]):not([value=pie]):checked~.chart__wrapper';
-$scatter-line-chart: 'input[type="radio"]:not([value="pie"]):is([value="line"],[value="scatter"],[value="bubble"],[value="radar"],[value="proportional"],[value="combo"]):checked ~ .chart__wrapper';
-
-$line-chart: 'input[type="radio"]:not([value="pie"])[value="line"]:checked ~ .chart__wrapper';
-//$bubble-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="bubble"]:checked ~ .chart__wrapper';
-//$radar-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="radar"]:checked ~ .chart__wrapper';
-//$proportional-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="proportional"]:checked ~ .chart__wrapper';
-//$proportional-chart-key: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="proportional"]:checked ~ .chart__key';
-$pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="polar"]):checked ~ .chart__wrapper';
-//$polar-chart: 'input[type="radio"]:not([value="none"])[value="polar"]:checked ~ .chart__wrapper';
-//$tree-chart: 'input[type="radio"]:not([value="none"])[value="treemap"]:checked ~ .chart__wrapper';
-//$tree-chart-key: 'input[type="radio"]:not([value="none"])[value="treemap"]:checked ~ .chart__key';
-//$dumbbell-chart: 'input[type="radio"]:not([value="none"])[value="dumbbell"]:checked ~ .chart__wrapper';
-//$waffle-chart: 'input[type="radio"]:not([value="none"])[value="waffle"]:checked ~ .chart__wrapper';
-
-// #region Basic setup - including: container setup, css vars
-
-::slotted(table) {
-  display: none !important;
-}
-
-.chart__outer {
-  container-type: inline-size;
-
-  // CSS vars that can be overwritten by declaring them without the -set on the end of the variable i.e. --chart-colour-1: red; would overwrite --chart-colour-1-set
-  --body-colour-set: var(--body-colour, white);
-  --text-colour-set: var(--text-colour, black);
-  --chart-height-set: var(--chart-height, #{$chart-height});
-  --chart-height-lg-set: var(--chart-height-lg, #{$chart-height-lg});
-  --chart-height-resp: var(--chart-height-set);
-  // Non-configurable css vars
-  --index-below: -1;
-  --index-base: 0;
-  --index-focus: 2;
-  --index-above: 10;
-  --index-floating: 100;
-  --index-menu: 200;
-  --index-overlay: 1000;
-  --key-label-width: 100%;
-  --label-size: 0.75rem;
-  --pie-size: calc(50% - 1.4rem);
-  --line-thickness: 1px;
-  --yaxis-width: auto;
-  --yaxis-point-display: block;
-  --yaxis-last-point-transform: translate(0, -50%);
-  --bar-gap: min(10%, 0.75rem);
-
-  margin-bottom: 2rem;
-  display: flex;
-  flex-direction: column;
-
-  @each $index, $value in $chart-colors {
-    --chart-colour-#{$index}-set: var(--chart-colour-#{$index}, #{$value});
-  }
-
-  tbody {
-    --chart-direction: 360deg;
-    --chart-day-bg-pos: 100% calc(var(--single-day) * 7);
-  }
-
-  &:has(.chart__options) {
-    position: relative;
-    padding-top: 1.5rem;
-  }
-
-  > * {
-    display: block;
-    order: 2;
-  }
-
-  > figcaption {
-    display: contents;
-
-    p:not(.chart__strapline, .chart__title) {
-      margin-bottom: 0.25rem;
-      font-size: var(--label-size);
-    }
-
-    > * {
-      order: 3;
-    }
-
-    > :is(.chart__title, .chart__strapline) {
-      order: 1;
-    }
-  }
-
-  @container (max-width: 36em) {
-    :has(tr:nth-child(5) td:nth-child(4)),
-    :has(tr:nth-child(10)) {
-      --yaxis-width: 0;
-      --yaxis-point-display: none;
-      --yaxis-last-point-transform: translate(0, -100%);
-      --bar-gap: 0;
-    }
-  }
-  @container (max-width: 62em) {
-    :has(tr:nth-child(10)) {
-      --bar-gap: 0;
-    }
-  }
-  @container (min-width: 36em) {
-    .chart__wrapper {
-      --chart-height-resp: var(--chart-height-lg-set);
-      --pie-size: calc(33.333% - 1.4rem);
-      --line-thickness: 0.8px;
-      --yaxis-width: auto;
-      --yaxis-point-display: block;
-      --yaxis-last-point-transform: translate(0, -50%);
-    }
-  }
-
-  @container (min-width: 62em) {
-    .chart__wrapper {
-      --label-size: 0.875rem; /* 14/16 */
-      --pie-size: calc(25% - 1.5rem);
-      --line-thickness: 0.5px;
-    }
-  }
-}
-// #endregion
-
-// #region figure caption elements
-.chart__title {
-  font-size: 2rem;
-  font-weight: 700;
-  margin-bottom: 0.25rem;
-}
-
-.chart__strapline {
-  margin-bottom: 1rem;
-}
-
-.chart__source {
-  border-top: 1px solid black;
-  position: relative;
-  padding-top: 0.25rem;
-}
-// #endregion
-
-// #region Apply chart colours
-@for $i from 1 to 10 {
-  .chart__key .key:nth-child(10n - #{10 - $i}),
-  .chart__outer table tbody tr td:not(:first-child):nth-child(10n - #{10 - ($i+1)}) {
-    --chart-colour: var(#{'--chart-colour-' + $i + '-set'});
-  }
-
-  input:is([value='line'], [value='radar'], [value='combo'], [value='proportional']):checked
-    ~ .chart__wrapper
-    .line:nth-child(10n - #{10 - $i}) {
-    color: var(#{'--chart-colour-' + $i + '-set'});
-    stroke: currentColor;
-    fill: currentColor;
-    z-index: #{10 - $i};
-  }
-  input:is([value='pie'], [value='polar']):checked ~ .chart__wrapper .pie path:nth-child(10n - #{10 - $i}) {
-    fill: var(#{'--chart-colour-' + $i + '-set'});
-  }
-}
-
-.chart__key .key:nth-child(10n),
-input[type='radio']:not([value='none']):not([value='pie']):checked
-  ~ .chart__outer
-  table
-  tbody
-  tr
-  td:not(:first-child):nth-child(10n + 1) {
-  --chart-colour: var(#{'--chart-colour-10-set'});
-}
-// #endregion
-
-// #region Chart type switcher
-.chart__outer > [type='radio'] {
-  opacity: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.chart__options {
-  &:has(span:first-child:last-child) {
-    display: none;
-  }
-
-  position: absolute;
-  display: block;
-  width: fit-content;
-  z-index: var(--index-above);
-  top: 0;
-  right: 0;
-  background-color: var(--body-colour-set);
-
-  > span:first-child {
-    text-align: right;
-    display: block;
-    height: 1.5rem;
-
-    &:before {
-      content: '';
-      height: 1rem;
-      width: 1rem;
-      background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3e%3cpath d='M31 19.3v-6.5l-3.9-.5c-.1-.4-.3-.9-.5-1.5l2.4-3-4.7-4.7-3.1 2.4c-.4-.2-.9-.4-1.5-.6L19.2 1h-6.5l-.5 3.9c-.6.2-1.1.4-1.5.6l-3-2.4L3 7.7l2.4 3c-.2.5-.4 1.1-.5 1.5l-3.9.5v6.5l3.9.5c.2.5.3 1 .6 1.5l-2.4 3 4.7 4.7 3-2.3c.4.2 1 .5 1.5.6l.5 3.8h6.5l.5-3.8c.5-.2 1.1-.4 1.5-.6l3 2.3 4.7-4.7-2.4-3 .6-1.5 3.8-.4zm-2.1-1.9-3.4.5c-.3 1.5-.8 2.7-1.6 3.6l2.1 2.6-1.9 2-2.6-2c-1 .7-2.5 1.3-3.7 1.5l-.5 3.3h-2.6l-.5-3.3c-1.2-.2-2.7-.8-3.7-1.5l-2.6 2-1.9-2 2.1-2.6c-.8-.9-1.2-2.1-1.6-3.6l-3.4-.5v-2.7l3.5-.5c.2-1.1.6-2.3 1.4-3.7L6 7.9l1.9-2L10.6 8c.8-.7 1.7-1.1 3.6-1.6l.5-3.4h2.6l.5 3.4c1.9.5 2.8.9 3.6 1.6l2.7-2L26 8l-2 2.5c.8 1.4 1.2 2.6 1.4 3.7l3.5.5v2.7zM16 20.8c-2.7 0-4.7-2-4.7-4.8 0-2.7 2-4.7 4.7-4.7s4.7 2 4.7 4.7-2 4.8-4.7 4.8zm0 2.2c3.9 0 6.9-3 6.9-7 0-3.9-3-6.9-6.9-6.9s-6.9 3-6.9 6.9c0 4 3 7 6.9 7z'%3e%3c/path%3e%3c/svg%3e");
-      background-size: 100% 100%;
-      display: inline-block;
-
-      vertical-align: bottom;
-      margin-bottom: 0.1875rem; /* 3 */
-      margin-right: 0.375rem; /* 6 */
-    }
-  }
-
-  > *:not(:first-child) {
-    display: none;
-  }
-
-  label {
-    cursor: pointer;
-
-    &:hover {
-      background: var(--label-bg, rgb(220, 220, 220));
-    }
-  }
-
-  &:hover {
-    outline: 3px solid black;
-
-    box-shadow: 0 0 0 calc(0.125rem + 0.125rem) #ffffff;
-    outline-offset: calc(0.125rem + 0.125rem);
-
-    > * {
-      display: block;
-    }
-  }
-
-  .chart__options__title {
-    margin-top: 1rem;
-    font-weight: bold;
-  }
-}
-
-.chart > [type='radio']:focus ~ .chart__switcher {
-  label {
-    display: block;
-  }
-}
-// #endregion
-
-// #region Chart key
-.chart__outer > input[type='checkbox'] {
-  opacity: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.chart__key {
-  padding: 0 0 0 0;
-  margin-bottom: 1.5rem;
-  //background: var(--colour-key-bg, rgb(220, 220, 220));
-  display: flex;
-  overflow: auto;
-  scroll-snap-type: x mandatory;
-  scroll-padding: 0.75rem;
-  justify-content: flex-end;
-  gap: 0.5rem;
-
-  .key {
-    font-size: 1rem !important;
-    margin: 0;
-
-    &:before {
-      content: '';
-      height: 0.8em;
-      width: 0.8em;
-      margin-right: 0.3em;
-      background-color: var(--chart-colour);
-      display: inline-block;
-      border-radius: 50%;
-    }
-
-    /*
-    display: inline-block;
-    padding: 0.5rem;
-    margin-right: 0.75rem;
-    margin-bottom: 0.75rem;
-    background: white;
-    white-space: nowrap;
-    cursor: pointer;
-    scroll-snap-align: start;
-
-    &:hover,
-    &:focus-within {
-      outline: 3px solid var(--chart-colour);
-    }
-    */
-
-    &[data-label='Min'],
-    &[data-label='Max'] {
-      display: none;
-    }
-
-    .chart__total {
-      display: none;
-    }
-  }
-}
-// #endregion
-
-// #region Hide data sets
-.chart__outer > input[type='checkbox']:not(:checked) ~ .chart__key .key {
-  opacity: 0.25;
-}
-
-.chart__outer > input[type='checkbox']:not(:checked) ~ .chart__wrapper table tbody tr td:not(:first-child) {
-  display: none;
-}
-
-.chart__outer > input[type='checkbox']:not(:checked) ~ .chart__wrapper :is(.chart__lines, .radar) .line {
-  display: none !important;
-}
-
-@for $i from 1 to 10 {
-  .chart__outer > input[type='checkbox']:nth-of-type(#{$i}):focus ~ .chart__key .key:nth-of-type(#{$i}) {
-    //outline: 3px solid var(--chart-colour);
-  }
-
-  .chart__outer > input[type='checkbox']:nth-of-type(#{$i}):not(:checked) ~ .chart__key .key:nth-of-type(#{$i}) {
-    opacity: 1;
-  }
-
-  .chart__outer
-    > input[type='checkbox']:nth-of-type(#{$i}):not(:checked)
-    ~ .chart__wrapper
-    table
-    tbody
-    tr
-    td:not(:first-child):nth-child(#{$i + 1}) {
-    display: block;
-  }
-
-  input:nth-of-type(#{$i}):not(:checked) ~ .chart__wrapper :is(.chart__lines, .radar) .line:nth-child(#{$i}) {
-    display: block !important;
-  }
-}
-// #endregion
-
-// #region Second table
-.chart:has(.chart__outer) > table {
-  order: 10;
-  display: none;
-}
-// #endregion Second table
-
-// #region Default column chart (Also applies to line chart)
-.chart__wrapper {
-  display: block;
-  display: flex;
-  flex-direction: row;
-  position: relative;
-  margin-bottom: 1rem;
-
-  .chart__yaxis {
-    display: flex;
-    flex-direction: column-reverse;
-    width: var(--yaxis-width);
-
-    .axis__point {
-      bottom: var(--percent);
-      position: relative;
-      height: 0;
-      white-space: nowrap;
-
-      &:not(:last-child) {
-        display: var(--yaxis-point-display);
-      }
-
-      span {
-        display: block;
-        transform: translate(0, -50%);
-        padding-right: 0.25rem;
-        text-align: right;
-        font-size: var(--label-size);
-      }
-
-      &:last-child span {
-        transform: var(--yaxis-last-point-transform);
-      }
-    }
-  }
-
-  .chart__xaxis {
-    margin-bottom: 1rem;
-    display: flex;
-    flex-direction: column-reverse;
-    width: 100%;
-    position: absolute;
-    left: 0;
-    bottom: -1rem;
-
-    .axis__point {
-      left: var(--percent);
-      width: 1px;
-      position: absolute;
-      height: 0;
-      white-space: nowrap;
-
-      span {
-        display: block;
-        transform: translate(-50%, 0%);
-        text-align: center;
-        font-size: var(--label-size);
-        position: absolute;
-        left: 50%;
-      }
-    }
-  }
-
-  .chart__guidelines {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column-reverse;
-    pointer-events: none;
-
-    .guideline {
-      bottom: var(--percent);
-      position: absolute;
-      right: 0;
-      width: 100%;
-      height: 0px;
-      margin-bottom: -1px;
-      border-bottom: 1px dashed #eeeeee;
-      pointer-events: none;
-      z-index: var(--index-below);
-      //overflow: hidden;
-
-      &:not(.guideline--target) span {
-        display: none;
-      }
-    }
-
-    .guideline--target {
-      border-bottom: 1px dashed #000000;
-      z-index: var(--index-above);
-      text-shadow: 1px solid white;
-      overflow: visible;
-
-      span {
-        position: absolute;
-        bottom: 0;
-        font-size: var(--label-size);
-        text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
-        background: rgba(255, 255, 255, 0.6);
-      }
-    }
-    [data-value='0'] {
-      border-bottom: 1px solid var(--colour-primary);
-
-      &:not(:first-child) {
-        border-bottom: 1px dashed var(--colour-primary);
-      }
-    }
-  }
-
-  .chart {
-    position: relative;
-    flex-grow: 1;
-  }
-
-  table {
-    display: block;
-    width: 100% !important;
-    padding-top: var(--chart-height-resp); // 16:9 ratio
-    position: relative;
-    margin-bottom: 0;
-    overflow: visible;
-
-    thead {
-      display: none;
-    }
-
-    tbody {
-      display: flex;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      flex-direction: row;
-      border: none;
-    }
-
-    tbody tr {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: flex-end;
-      border: none;
-      width: 100%;
-      height: 100%;
-      position: relative;
-      padding: 0 2px;
-      gap: var(--bar-gap);
-
-      td {
-        font-weight: inherit;
-      }
-
-      td:first-child {
-        position: absolute;
-        top: 100%;
-        left: 50%;
-        transform: translate(-50%, 0);
-        width: fit-content;
-        padding: 0;
-        white-space: nowrap;
-        max-width: 6rem;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-size: var(--label-size);
-        //display: none;
-        text-align: center;
-
-        @container (min-width: 62em) {
-          display: block;
-          left: 50% !important;
-          transform: translate(-50%, 0) !important;
-        }
-      }
-
-      td[data-label='Min'],
-      td[data-label='Max'] {
-        display: none;
-      }
-
-      &:first-child td:first-child,
-      &:last-child td:first-child {
-        display: block;
-      }
-
-      td:not(:first-child) {
-        height: 100%;
-        height: var(--percent, 0%);
-        bottom: var(--bottom, 0%);
-        width: 100%;
-        max-width: 1.5rem;
-        position: relative;
-        background: green;
-        padding: 0;
-        background: var(--chart-colour);
-        border-top-right-radius: 4px;
-        border-top-left-radius: 4px;
-
-        &:has(span:empty),
-        &:empty {
-          display: none;
-        }
-
-        &[data-label]:before {
-          display: none;
-        }
-
-        span {
-          position: absolute;
-          bottom: 100%;
-          left: 50%;
-          font-size: var(--label-size);
-          line-height: 1.2;
-          transform: translate(-50%, 0);
-          background: var(--chart-colour);
-          opacity: 0;
-          pointer-events: none;
-          padding: 0.5rem;
-          border-radius: 0.5rem;
-          margin-bottom: 0.25rem;
-          color: var(--colour-primary-theme);
-          white-space: pre;
-          text-align: center;
-
-          &::before {
-            content: attr(data-label) '\A' attr(data-group) '\A';
-          }
-
-          &[data-second]:after {
-            content: '\A' attr(data-second-label) ': ' attr(data-second);
-          }
-        }
-
-        &:hover span {
-          opacity: 1;
-          z-index: var(--index-above);
-        }
-      }
-
-      @container (min-width: 36em) {
-        &:first-child td:not(:first-child) span,
-        &:last-child td:not(:first-child) span {
-          left: 50%;
-          transform: translate(-50%, 0);
-          text-align: center;
-        }
-      }
-
-      td:first-child {
-        &[data-label]:before {
-          display: none;
-        }
-      }
-    }
-
-    // change the look of chart when crowded
-    @container (max-width: 36em) {
-      tbody:has(tr:nth-child(5) td:nth-child(4)) tr,
-      tbody:has(tr:nth-child(10)) tr {
-        td:first-child {
-          display: none;
-        }
-
-        &:first-child td:first-child {
-          left: 0%;
-          transform: translate(0, 0);
-          display: block;
-          text-align: left;
-        }
-        &:last-child td:first-child {
-          left: 100%;
-          transform: translate(-100%, 0);
-          display: block;
-          text-align: right;
-        }
-
-        &:first-child td:not(:first-child) span {
-          left: -20%;
-          transform: translate(0%, 0);
-          text-align: left;
-        }
-
-        &:last-child td:not(:first-child) span {
-          left: 120%;
-          transform: translate(-100%, 0);
-          text-align: right;
-        }
-      }
-    }
-    // Hide labels when it gets crowded
-    @container (min-width: 62em) {
-      tbody:has(tr:nth-child(25)) {
-        tr td:first-child {
-          display: none !important;
-        }
-
-        tr:is(:first-child, :nth-child(5n)) td:first-child {
-          display: block !important;
-        }
-      }
-
-      tbody:has(tr:nth-child(50)) {
-        tr:is(:first-child, :nth-child(5n)) td:first-child,
-        tr td:first-child {
-          display: none !important;
-        }
-
-        tr:is(:first-child, :nth-child(10n)) td:first-child {
-          display: block !important;
-        }
-      }
-
-      tbody:has(tr:nth-child(100)) {
-        tr:is(:first-child, :nth-child(10n)) td:first-child,
-        tr td:first-child {
-          display: none !important;
-        }
-
-        tr:is(:first-child, :nth-child(20n)) td:first-child {
-          display: block !important;
-        }
-      }
-    }
-
-    // Hide items when theres too many too display
-    tbody:has(tr:nth-child(1001)) {
-      tr {
-        display: none;
-      }
-
-      tr:nth-last-child(-n + 1001) ~ tr {
-        display: flex;
-      }
-    }
-  }
-
-  .line,
-  .pie {
-    display: none;
-  }
-}
-// #endregion
-
-// #region Bar chart
-@mixin barchart($selector) {
-  #{$selector} {
-    tbody {
-      --chart-direction: 90deg;
-      --chart-day-bg-pos: calc(var(--single-day) * 7) 100%;
-      --bar-gap: 0;
-    }
-
-    .chart__guidelines {
-      position: absolute;
-
-      .guideline {
-        bottom: auto;
-        left: var(--percent);
-        height: 100%;
-        border-left: 1px dashed #eee;
-        width: 0;
-
-        span {
-          display: block;
-          font-size: var(--label-size);
-          position: absolute;
-          top: 100%;
-          transform: translate(-50%, 0.2em);
-        }
-      }
-    }
-
-    .chart__yaxis {
-      display: none;
-    }
-
-    table {
-      padding-top: 0;
-    }
-
-    table tbody {
-      flex-direction: column;
-      position: relative;
-    }
-
-    table tbody tr {
-      flex-direction: column;
-      align-items: flex-start;
-      margin-bottom: 0.5rem;
-      padding: 0;
-
-      td {
-        height: 3rem;
-        bottom: 0;
-        left: var(--bottom, 0%);
-        width: var(--comparison, var(--percent));
-        max-width: 100%;
-        border-top-left-radius: 0;
-        border-bottom-right-radius: 4px;
-      }
-
-      td:first-child {
-        position: static;
-        transform: none;
-        display: block !important;
-        max-height: 1.5rem;
-      }
-    }
-
-    &[data-longest-label] {
-      &:before {
-        display: block;
-        content: attr(data-longest-label);
-        font-size: var(--label-size);
-        padding-right: 0.5em;
-        opacity: 0;
-        pointer-events: none;
-        white-space: nowrap;
-      }
-    }
-
-    &[data-longest-label] table tbody tr {
-      td:first-child {
-        position: absolute;
-        transform: translate(-100%, -50%) !important;
-        display: block !important;
-        max-height: 1.5rem;
-        z-index: var(--index-above);
-        top: 50%;
-        left: 0 !important;
-        padding-right: 0.5em;
-      }
-    }
-  }
-}
-
-@include barchart('.chart__outer ' + $bar-chart);
-
-@container (max-width: 36em) {
-  @include barchart('.chart__outer ' + $responsive-chart);
-}
-// #endregion
-
-// #region stacked
-input[type='radio']:not([value='pie'])[value='stacked']:checked ~ .chart__wrapper {
-  table tbody tr {
-    --bar-gap: 0;
-    flex-direction: column-reverse;
-    justify-content: flex-start;
-    align-items: center;
-
-    td {
-      border-radius: 0 !important;
-    }
-  }
-}
-// #endregion
-
-// #region Scatter and line chart
-#{'.chart__outer ' + $scatter-line-chart} {
-  table tbody {
-    justify-content: space-between;
-
-    tr {
-      td:not(.chart__bar):first-child {
-        left: 50% !important;
-        width: 4rem;
-      }
-    }
-  }
-}
-
-#{'.chart__outer ' + $scatter-line-chart} {
-  table tbody {
-    tr:not(:has(.chart__bar)) {
-      width: 2px;
-      margin-left: -1px;
-      margin-right: -1px;
-      padding: 0;
-    }
-
-    tr {
-      td:not(.chart__bar):not(:first-child) {
-        position: absolute;
-        left: 50%;
-        bottom: calc(var(--axis));
-        height: 6px;
-        width: 6px;
-        margin-bottom: -3px;
-        margin-left: -3px;
-        border-radius: 3px;
-
-        &:hover {
-          opacity: 1;
-        }
-      }
-
-      &:before {
-        content: '';
-        border-left: 1px dashed #eeeeee;
-        height: 100%;
-        width: 0;
-        position: absolute;
-        top: 0;
-        left: 50%;
-        height: 100%;
-        margin-left: -1px;
-        z-index: var(--index-below);
-        opacity: 0;
-      }
-
-      &:hover {
-        &:before {
-          opacity: 1;
-        }
-      }
-
-      &:is([data-event], [data-event-right]) {
-        &:before {
-          opacity: 1;
-          border-left: 1px dashed #000000;
-        }
-        &:after {
-          content: attr(data-event);
-          position: absolute;
-          top: 0;
-          left: 50%;
-          width: max-content;
-          z-index: var(--index-below);
-          font-size: var(--label-size);
-          background: rgba(255, 255, 255, 0.5);
-        }
-      }
-      &[data-event] {
-        &:after {
-          transform: translate(-50%, -0.5em);
-        }
-      }
-      &[data-event-right] {
-        &:after {
-          transform: translate(-101%, -0.5em);
-        }
-      }
-      &[data-event-left] {
-        &:after {
-          transform: translate(1%, -0.5em);
-        }
-      }
-    }
-  }
-
-  .pie {
-    display: none;
-  }
-}
-
-#{':host([data-increment][data-start][data-end]) .chart__outer ' + $scatter-line-chart} {
-  table tbody tr {
-    position: absolute;
-    left: var(--position);
-
-    td:first-child {
-      display: none;
-    }
-  }
-
-  .slope {
-    pointer-events: none;
-  }
-  .slope svg {
-    color: black;
-    stroke: currentColor;
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    stroke-width: var(--line-thickness);
-    width: 100%;
-    height: calc(100% - 1rem);
-    pointer-events: none;
-    z-index: var(--index-above);
-  }
-}
-// #endregion
-
-// #region Line chart
-#{'.chart__outer ' + $line-chart} {
-  .chart__lines ~ table tbody {
-    tr {
-      td:not(.chart__bar):not(:first-child):not(:hover) {
-        opacity: 0;
-      }
-    }
-  }
-
-  .line {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    stroke-width: var(--line-thickness);
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: var(--index-above);
-  }
-}
-// #endregion
-
-// #region Pie chart
-#{'.chart__outer ' + $pie-chart} {
-  margin-bottom: 2rem;
-
-  .chart__yaxis,
-  .line {
-    display: none;
-  }
-  table {
-    display: none;
-  }
-
-  .pies {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 2rem;
-  }
-
-  .pie {
-    position: relative;
-    width: 100%;
-    aspect-ratio: 1 / 1;
-    min-width: 12.5rem; /* 200 */
-    flex: 1 1 auto;
-    display: inline-block;
-    max-width: var(--pie-size);
-
-    &:first-child {
-      margin-left: 0;
-    }
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-
-  .pie svg {
-    width: 100%;
-    height: 100%;
-
-    path:hover {
-      transform: scale(1.05);
-    }
-  }
-
-  .pie > div {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    pointer-events: none;
-    background: var(--body-colour-set);
-    border-radius: 50%;
-    z-index: var(--index-focus);
-    padding: 1rem;
-    aspect-ratio: 1/1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 67%;
-
-    span {
-      text-align: center;
-      display: block;
-    }
-  }
-
-  .pie:has(path:hover) > div {
-    display: none;
-  }
-
-  .pie foreignObject {
-    background: var(--body-colour-set);
-    border-radius: 50%;
-    z-index: var(--index-focus);
-    pointer-events: none;
-    display: none;
-    padding: 1rem;
-
-    div {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-    }
-    span {
-      text-align: center;
-      display: block;
-    }
-  }
-
-  .pie {
-    path:nth-child(1):hover ~ foreignObject:nth-of-type(1),
-    path:nth-child(2):hover ~ foreignObject:nth-of-type(2),
-    path:nth-child(3):hover ~ foreignObject:nth-of-type(3),
-    path:nth-child(4):hover ~ foreignObject:nth-of-type(4),
-    path:nth-child(5):hover ~ foreignObject:nth-of-type(5),
-    path:nth-child(6):hover ~ foreignObject:nth-of-type(6),
-    path:nth-child(7):hover ~ foreignObject:nth-of-type(7),
-    path:nth-child(8):hover ~ foreignObject:nth-of-type(8),
-    path:nth-child(9):hover ~ foreignObject:nth-of-type(9) {
-      display: block;
-    }
-  }
-}
-// #endregion
-
-// #region Modifiers
-
-// #region Display data modifier class
-:host(.chart--display-data) {
-  table tbody tr {
-    td:not(:first-child) {
-      span {
-        &:before {
-          display: none;
-        }
-        opacity: 1 !important;
-        z-index: var(--index-above);
-        top: 0%;
-        transform: translate(-50%, 0%) !important;
-        display: block !important;
-        height: fit-content;
-
-        margin: 0;
-      }
-    }
-  }
-
-  #{$bar-chart} table tbody tr td:not(:first-child) {
-    span {
-      top: 50%;
-      right: 0;
-      left: 0;
-      transform: translate(0%, -50%) !important;
-      text-align: right;
-      width: calc(100% - 0.4rem);
-      min-width: fit-content;
-      padding: 0 0.1rem;
-      border-radius: 0;
-    }
-  }
-
-  #{$scatter-line-chart} table tbody tr td:not(:first-child) {
-    span {
-      bottom: 0.25rem;
-      top: auto;
-    }
-  }
-
-  #{$line-chart} .chart__lines ~ table tbody tr td:not(:first-child):not(:hover) {
-    opacity: 1;
-  }
-}
-// #endregion
-
-// #region show chart totals
-:host(.chart--show-totals) {
-  .chart__key {
-    .key {
-      .chart__total {
-        display: flex;
-        font-size: var(--label-size);
-        font-weight: bold;
-        line-height: 1;
-        padding-left: 1.5em;
-      }
-
-      .chart__total__number {
-        margin-right: 1rem;
-      }
-      .chart__total__percent {
-        margin-left: auto;
-      }
-    }
-  }
-}
-// #endregion
-
-// #endregion
-
-// #region aniamtion
-
-#{'.chart--animate.animating.inview'} {
-  --animation-left: 2s;
-
-  table tbody tr td:not(:first-child) {
-    transition:
-      height 2s ease-out,
-      width 2s ease-out,
-      bottom 2s ease-out,
-      left var(--animation-left) ease-out;
-    transition-delay: calc(var(--row-index) * 0.1s);
-  }
-}
-
-#{'.chart--animate:not(.inview)'} {
-  table tbody tr td:not(:first-child) {
-    --bottom: var(--min-bottom, 0%) !important;
-    --percent: 0% !important;
-    --axis: 0% !important;
-    --comparison: 0% !important;
-  }
-}
-
-/*
-#{'.chart--animate.animating.inview '+comparison-chart} {
-
-  --animation-left: 0s;
-}
-
-#{'.chart--animate:not(.inview) '+comparison-chart} {
-
-  table tbody tr td:not(:first-child) {
-
-    --comparison: 50%!important;
-  }
-}
-*/
-
-// #region Animate bar and column chart
-#{'.chart--animate.animating ' + $default-chart} {
-  table tbody tr td:not(:first-child) {
-    overflow: hidden;
-  }
-}
-// #endregion
-
-// #region scatter and line charts
-
-#{'.chart--animate:not(.inview) ' + $scatter-line-chart} {
-  table tbody tr td:not(:first-child) {
-    --percent: 0% !important;
-  }
-}
-
-#{'.chart--animate.animating ' + $scatter-line-chart} {
-  .slope path {
-    transition: 2s ease-out;
-  }
-}
-
-#{'.chart--animate:not(.inview) ' + $scatter-line-chart} {
-  .slope path {
-    d: var(--path);
-  }
-}
-
-// Line chart
-#{'.chart--animate.animating '+$line-chart}
-//#{'.chart--animate '+proportional-chart},
-//#{'.chart--animate '+combo-chart}
-{
-  .line path {
-    transition: 2s ease-out;
-  }
-}
-
-#{'.chart--animate:not(.inview) '+$line-chart}
-//#{'.chart--animate:not(.inview) '+proportional-chart},
-//#{'.chart--animate:not(.inview) '+combo-chart}
-{
-  .line path {
-    d: var(--path);
-  }
-}
-// #endregion
-
-// #region pie charts
-#{'.chart--animate ' + $pie-chart} {
-  .pie path {
-    transition: calc(2s * var(--second-fraction, 1)) ease-out;
-    transition-delay: calc((var(--row-index) * var(--path-index)) * 0.1s);
-  }
-}
-
-#{'.chart--animate:not(.inview) ' + $pie-chart} {
-  .pie path {
-    transform: scale(60%) !important;
-  }
-}
-/*#{'.chart--animate:not(.inview) '+polar-chart} 
-{
-  .pie path {
-    transform: scale(40%) !important;
-  }
-}
-*/
-// #endregion
-
-// #endregion
+@use 'sass:map';
+
+@use '../_func' as *;
+
+$chart-colour-1: #1ebee6 !default;
+$chart-colour-2: #ffd2d2 !default;
+$chart-colour-3: #b4e6a5 !default;
+$chart-colour-4: #ffa500 !default;
+$chart-colour-5: #46003c !default;
+$chart-colour-6: #b4e6a5 !default;
+$chart-colour-7: #1ebee6 !default;
+$chart-colour-8: #ffd2d2 !default;
+$chart-colour-9: #9d9d9d !default;
+$chart-colour-10: #66838a !default;
+
+$chart-colors: ();
+$chart-colors: map.merge(
+  (
+    1: $chart-colour-1,
+    2: $chart-colour-2,
+    3: $chart-colour-3,
+    4: $chart-colour-4,
+    5: $chart-colour-5,
+    6: $chart-colour-6,
+    7: $chart-colour-7,
+    8: $chart-colour-8,
+    9: $chart-colour-9,
+    10: $chart-colour-10,
+  ),
+  $chart-colors
+);
+
+$chart-height: 56.25% !default;
+$chart-height-lg: 42.86% !default;
+
+/*  Selectors */
+$default-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__wrapper';
+$bar-chart: 'input[type=radio]:is([value="bar"],[value="comparison"]):not([value=none]):not([value=pie]):checked~.chart__wrapper';
+
+/* $comparison-chart: 'input[type=radio][value="comparison"]:not([value=none]):not([value=pie]):checked~.chart__wrapper'; */
+/* $comparison-chart-key: 'input[type=radio][value="comparison"]:not([value=none]):not([value=pie]):checked~.chart__key'; */
+
+$responsive-chart: 'input[type=radio][value="responsive"]:not([value=none]):not([value=pie]):checked~.chart__wrapper';
+$scatter-line-chart: 'input[type="radio"]:not([value="pie"]):is([value="line"],[value="scatter"],[value="bubble"],[value="radar"],[value="proportional"],[value="combo"]):checked ~ .chart__wrapper';
+
+$line-chart: 'input[type="radio"]:not([value="pie"])[value="line"]:checked ~ .chart__wrapper';
+/* $bubble-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="bubble"]:checked ~ .chart__wrapper'; */
+/* $radar-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="radar"]:checked ~ .chart__wrapper'; */
+/* $proportional-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="proportional"]:checked ~ .chart__wrapper'; */
+/* $proportional-chart-key: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="proportional"]:checked ~ .chart__key'; */
+$pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="polar"]):checked ~ .chart__wrapper';
+/* $polar-chart: 'input[type="radio"]:not([value="none"])[value="polar"]:checked ~ .chart__wrapper'; */
+/* $tree-chart: 'input[type="radio"]:not([value="none"])[value="treemap"]:checked ~ .chart__wrapper'; */
+/* $tree-chart-key: 'input[type="radio"]:not([value="none"])[value="treemap"]:checked ~ .chart__key'; */
+/* $dumbbell-chart: 'input[type="radio"]:not([value="none"])[value="dumbbell"]:checked ~ .chart__wrapper'; */
+/* $waffle-chart: 'input[type="radio"]:not([value="none"])[value="waffle"]:checked ~ .chart__wrapper'; */
+
+/* #region Basic setup - including: container setup, css vars */
+
+::slotted(table) {
+  display: none !important;
+}
+
+.chart__outer {
+  container-type: inline-size;
+
+  /*  CSS vars that can be overwritten by declaring them without the -set on the end of the variable i.e. --chart-colour-1: red; would overwrite --chart-colour-1-set */
+  --body-colour-set: var(--body-colour, white);
+  --text-colour-set: var(--text-colour, black);
+  --chart-height-set: var(--chart-height, #{$chart-height});
+  --chart-height-lg-set: var(--chart-height-lg, #{$chart-height-lg});
+  --chart-height-resp: var(--chart-height-set);
+  /*  Non-configurable css vars */
+  --index-below: -1;
+  --index-base: 0;
+  --index-focus: 2;
+  --index-above: 10;
+  --index-floating: 100;
+  --index-menu: 200;
+  --index-overlay: 1000;
+  --key-label-width: 100%;
+  --label-size: 0.75rem;
+  --pie-size: calc(50% - 1.4rem);
+  --line-thickness: 1px;
+  --yaxis-width: auto;
+  --yaxis-point-display: block;
+  --yaxis-last-point-transform: translate(0, -50%);
+  --bar-gap: min(10%, 0.75rem);
+
+  margin-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
+
+  @each $index, $value in $chart-colors {
+    --chart-colour-#{$index}-set: var(--chart-colour-#{$index}, #{$value});
+  }
+
+  tbody {
+    --chart-direction: 360deg;
+    --chart-day-bg-pos: 100% calc(var(--single-day) * 7);
+  }
+
+  &:has(.chart__options) {
+    position: relative;
+    padding-top: 1.5rem;
+  }
+
+  > * {
+    display: block;
+    order: 2;
+  }
+
+  > figcaption {
+    display: contents;
+
+    p:not(.chart__strapline, .chart__title) {
+      margin-bottom: 0.25rem;
+      font-size: var(--label-size);
+    }
+
+    > * {
+      order: 3;
+    }
+
+    > :is(.chart__title, .chart__strapline) {
+      order: 1;
+    }
+  }
+
+  @container (max-width: 36em) {
+    :has(tr:nth-child(5) td:nth-child(4)),
+    :has(tr:nth-child(10)) {
+      --yaxis-width: 0;
+      --yaxis-point-display: none;
+      --yaxis-last-point-transform: translate(0, -100%);
+      --bar-gap: 0;
+    }
+  }
+  @container (max-width: 62em) {
+    :has(tr:nth-child(10)) {
+      --bar-gap: 0;
+    }
+  }
+  @container (min-width: 36em) {
+    .chart__wrapper {
+      --chart-height-resp: var(--chart-height-lg-set);
+      --pie-size: calc(33.333% - 1.4rem);
+      --line-thickness: 0.8px;
+      --yaxis-width: auto;
+      --yaxis-point-display: block;
+      --yaxis-last-point-transform: translate(0, -50%);
+    }
+  }
+
+  @container (min-width: 62em) {
+    .chart__wrapper {
+      --label-size: 0.875rem; /* 14/16 */
+      --pie-size: calc(25% - 1.5rem);
+      --line-thickness: 0.5px;
+    }
+  }
+}
+/* #endregion */
+
+/* #region figure caption elements */
+.chart__title {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 0.25rem;
+}
+
+.chart__strapline {
+  margin-bottom: 1rem;
+}
+
+.chart__source {
+  border-top: 1px solid black;
+  position: relative;
+  padding-top: 0.25rem;
+}
+/* #endregion */
+
+/* #region Apply chart colours */
+@for $i from 1 to 10 {
+  .chart__key .key:nth-child(10n - #{10 - $i}),
+  .chart__outer table tbody tr td:not(:first-child):nth-child(10n - #{10 - ($i+1)}) {
+    --chart-colour: var(#{'--chart-colour-' + $i + '-set'});
+  }
+
+  input:is([value='line'], [value='radar'], [value='combo'], [value='proportional']):checked
+    ~ .chart__wrapper
+    .line:nth-child(10n - #{10 - $i}) {
+    color: var(#{'--chart-colour-' + $i + '-set'});
+    stroke: currentColor;
+    fill: currentColor;
+    z-index: #{10 - $i};
+  }
+  input:is([value='pie'], [value='polar']):checked ~ .chart__wrapper .pie path:nth-child(10n - #{10 - $i}) {
+    fill: var(#{'--chart-colour-' + $i + '-set'});
+  }
+}
+
+.chart__key .key:nth-child(10n),
+input[type='radio']:not([value='none']):not([value='pie']):checked
+  ~ .chart__outer
+  table
+  tbody
+  tr
+  td:not(:first-child):nth-child(10n + 1) {
+  --chart-colour: var(#{'--chart-colour-10-set'});
+}
+/* #endregion */
+
+/* #region Chart type switcher */
+.chart__outer > [type='radio'] {
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.chart__options {
+  &:has(span:first-child:last-child) {
+    display: none;
+  }
+
+  position: absolute;
+  display: block;
+  width: fit-content;
+  z-index: var(--index-above);
+  top: 0;
+  right: 0;
+  background-color: var(--body-colour-set);
+
+  > span:first-child {
+    text-align: right;
+    display: block;
+    height: 1.5rem;
+
+    &:before {
+      content: '';
+      height: 1rem;
+      width: 1rem;
+      background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3e%3cpath d='M31 19.3v-6.5l-3.9-.5c-.1-.4-.3-.9-.5-1.5l2.4-3-4.7-4.7-3.1 2.4c-.4-.2-.9-.4-1.5-.6L19.2 1h-6.5l-.5 3.9c-.6.2-1.1.4-1.5.6l-3-2.4L3 7.7l2.4 3c-.2.5-.4 1.1-.5 1.5l-3.9.5v6.5l3.9.5c.2.5.3 1 .6 1.5l-2.4 3 4.7 4.7 3-2.3c.4.2 1 .5 1.5.6l.5 3.8h6.5l.5-3.8c.5-.2 1.1-.4 1.5-.6l3 2.3 4.7-4.7-2.4-3 .6-1.5 3.8-.4zm-2.1-1.9-3.4.5c-.3 1.5-.8 2.7-1.6 3.6l2.1 2.6-1.9 2-2.6-2c-1 .7-2.5 1.3-3.7 1.5l-.5 3.3h-2.6l-.5-3.3c-1.2-.2-2.7-.8-3.7-1.5l-2.6 2-1.9-2 2.1-2.6c-.8-.9-1.2-2.1-1.6-3.6l-3.4-.5v-2.7l3.5-.5c.2-1.1.6-2.3 1.4-3.7L6 7.9l1.9-2L10.6 8c.8-.7 1.7-1.1 3.6-1.6l.5-3.4h2.6l.5 3.4c1.9.5 2.8.9 3.6 1.6l2.7-2L26 8l-2 2.5c.8 1.4 1.2 2.6 1.4 3.7l3.5.5v2.7zM16 20.8c-2.7 0-4.7-2-4.7-4.8 0-2.7 2-4.7 4.7-4.7s4.7 2 4.7 4.7-2 4.8-4.7 4.8zm0 2.2c3.9 0 6.9-3 6.9-7 0-3.9-3-6.9-6.9-6.9s-6.9 3-6.9 6.9c0 4 3 7 6.9 7z'%3e%3c/path%3e%3c/svg%3e");
+      background-size: 100% 100%;
+      display: inline-block;
+
+      vertical-align: bottom;
+      margin-bottom: 0.1875rem; /* 3 */
+      margin-right: 0.375rem; /* 6 */
+    }
+  }
+
+  > *:not(:first-child) {
+    display: none;
+  }
+
+  label {
+    cursor: pointer;
+
+    &:hover {
+      background: var(--label-bg, rgb(220, 220, 220));
+    }
+  }
+
+  &:hover {
+    outline: 3px solid black;
+
+    box-shadow: 0 0 0 calc(0.125rem + 0.125rem) #ffffff;
+    outline-offset: calc(0.125rem + 0.125rem);
+
+    > * {
+      display: block;
+    }
+  }
+
+  .chart__options__title {
+    margin-top: 1rem;
+    font-weight: bold;
+  }
+}
+
+.chart > [type='radio']:focus ~ .chart__switcher {
+  label {
+    display: block;
+  }
+}
+/* #endregion */
+
+/* #region Chart key */
+.chart__outer > input[type='checkbox'] {
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.chart__key {
+  padding: 0 0 0 0;
+  margin-bottom: 1.5rem;
+  /* background: var(--colour-key-bg, rgb(220, 220, 220)); */
+  display: flex;
+  overflow: auto;
+  scroll-snap-type: x mandatory;
+  scroll-padding: 0.75rem;
+  justify-content: flex-end;
+  gap: 0.5rem;
+
+  .key {
+    font-size: 1rem !important;
+    margin: 0;
+
+    &:before {
+      content: '';
+      height: 0.8em;
+      width: 0.8em;
+      margin-right: 0.3em;
+      background-color: var(--chart-colour);
+      display: inline-block;
+      border-radius: 50%;
+    }
+
+    /*
+    display: inline-block;
+    padding: 0.5rem;
+    margin-right: 0.75rem;
+    margin-bottom: 0.75rem;
+    background: white;
+    white-space: nowrap;
+    cursor: pointer;
+    scroll-snap-align: start;
+
+    &:hover,
+    &:focus-within {
+      outline: 3px solid var(--chart-colour);
+    }
+    */
+
+    &[data-label='Min'],
+    &[data-label='Max'] {
+      display: none;
+    }
+
+    .chart__total {
+      display: none;
+    }
+  }
+}
+/* #endregion */
+
+/* #region Hide data sets */
+.chart__outer > input[type='checkbox']:not(:checked) ~ .chart__key .key {
+  opacity: 0.25;
+}
+
+.chart__outer > input[type='checkbox']:not(:checked) ~ .chart__wrapper table tbody tr td:not(:first-child) {
+  display: none;
+}
+
+.chart__outer > input[type='checkbox']:not(:checked) ~ .chart__wrapper :is(.chart__lines, .radar) .line {
+  display: none !important;
+}
+
+@for $i from 1 to 10 {
+  .chart__outer > input[type='checkbox']:nth-of-type(#{$i}):focus ~ .chart__key .key:nth-of-type(#{$i}) {
+    /* outline: 3px solid var(--chart-colour); */
+  }
+
+  .chart__outer > input[type='checkbox']:nth-of-type(#{$i}):not(:checked) ~ .chart__key .key:nth-of-type(#{$i}) {
+    opacity: 1;
+  }
+
+  .chart__outer
+    > input[type='checkbox']:nth-of-type(#{$i}):not(:checked)
+    ~ .chart__wrapper
+    table
+    tbody
+    tr
+    td:not(:first-child):nth-child(#{$i + 1}) {
+    display: block;
+  }
+
+  input:nth-of-type(#{$i}):not(:checked) ~ .chart__wrapper :is(.chart__lines, .radar) .line:nth-child(#{$i}) {
+    display: block !important;
+  }
+}
+/* #endregion */
+
+/* #region Second table */
+.chart:has(.chart__outer) > table {
+  order: 10;
+  display: none;
+}
+/* #endregion */ Second table
+
+/* #region Default column chart (Also applies to line chart) */
+.chart__wrapper {
+  display: block;
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  margin-bottom: 1rem;
+
+  .chart__yaxis {
+    display: flex;
+    flex-direction: column-reverse;
+    width: var(--yaxis-width);
+
+    .axis__point {
+      bottom: var(--percent);
+      position: relative;
+      height: 0;
+      white-space: nowrap;
+
+      &:not(:last-child) {
+        display: var(--yaxis-point-display);
+      }
+
+      span {
+        display: block;
+        transform: translate(0, -50%);
+        padding-right: 0.25rem;
+        text-align: right;
+        font-size: var(--label-size);
+      }
+
+      &:last-child span {
+        transform: var(--yaxis-last-point-transform);
+      }
+    }
+  }
+
+  .chart__xaxis {
+    margin-bottom: 1rem;
+    display: flex;
+    flex-direction: column-reverse;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: -1rem;
+
+    .axis__point {
+      left: var(--percent);
+      width: 1px;
+      position: absolute;
+      height: 0;
+      white-space: nowrap;
+
+      span {
+        display: block;
+        transform: translate(-50%, 0%);
+        text-align: center;
+        font-size: var(--label-size);
+        position: absolute;
+        left: 50%;
+      }
+    }
+  }
+
+  .chart__guidelines {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column-reverse;
+    pointer-events: none;
+
+    .guideline {
+      bottom: var(--percent);
+      position: absolute;
+      right: 0;
+      width: 100%;
+      height: 0px;
+      margin-bottom: -1px;
+      border-bottom: 1px dashed #eeeeee;
+      pointer-events: none;
+      z-index: var(--index-below);
+      /* overflow: hidden; */
+
+      &:not(.guideline--target) span {
+        display: none;
+      }
+    }
+
+    .guideline--target {
+      border-bottom: 1px dashed #000000;
+      z-index: var(--index-above);
+      text-shadow: 1px solid white;
+      overflow: visible;
+
+      span {
+        position: absolute;
+        bottom: 0;
+        font-size: var(--label-size);
+        text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
+        background: rgba(255, 255, 255, 0.6);
+      }
+    }
+    [data-value='0'] {
+      border-bottom: 1px solid var(--colour-primary);
+
+      &:not(:first-child) {
+        border-bottom: 1px dashed var(--colour-primary);
+      }
+    }
+  }
+
+  .chart {
+    position: relative;
+    flex-grow: 1;
+  }
+
+  table {
+    display: block;
+    width: 100% !important;
+    padding-top: var(--chart-height-resp); /*  16:9 ratio */
+    position: relative;
+    margin-bottom: 0;
+    overflow: visible;
+
+    thead {
+      display: none;
+    }
+
+    tbody {
+      display: flex;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      flex-direction: row;
+      border: none;
+    }
+
+    tbody tr {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: flex-end;
+      border: none;
+      width: 100%;
+      height: 100%;
+      position: relative;
+      padding: 0 2px;
+      gap: var(--bar-gap);
+
+      td {
+        font-weight: inherit;
+      }
+
+      td:first-child {
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translate(-50%, 0);
+        width: fit-content;
+        padding: 0;
+        white-space: nowrap;
+        max-width: 6rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: var(--label-size);
+        /* display: none; */
+        text-align: center;
+
+        @container (min-width: 62em) {
+          display: block;
+          left: 50% !important;
+          transform: translate(-50%, 0) !important;
+        }
+      }
+
+      td[data-label='Min'],
+      td[data-label='Max'] {
+        display: none;
+      }
+
+      &:first-child td:first-child,
+      &:last-child td:first-child {
+        display: block;
+      }
+
+      td:not(:first-child) {
+        height: 100%;
+        height: var(--percent, 0%);
+        bottom: var(--bottom, 0%);
+        width: 100%;
+        max-width: 1.5rem;
+        position: relative;
+        background: green;
+        padding: 0;
+        background: var(--chart-colour);
+        border-top-right-radius: 4px;
+        border-top-left-radius: 4px;
+
+        &:has(span:empty),
+        &:empty {
+          display: none;
+        }
+
+        &[data-label]:before {
+          display: none;
+        }
+
+        span {
+          position: absolute;
+          bottom: 100%;
+          left: 50%;
+          font-size: var(--label-size);
+          line-height: 1.2;
+          transform: translate(-50%, 0);
+          background: var(--chart-colour);
+          opacity: 0;
+          pointer-events: none;
+          padding: 0.5rem;
+          border-radius: 0.5rem;
+          margin-bottom: 0.25rem;
+          color: var(--colour-primary-theme);
+          white-space: pre;
+          text-align: center;
+
+          &::before {
+            content: attr(data-label) '\A' attr(data-group) '\A';
+          }
+
+          &[data-second]:after {
+            content: '\A' attr(data-second-label) ': ' attr(data-second);
+          }
+        }
+
+        &:hover span {
+          opacity: 1;
+          z-index: var(--index-above);
+        }
+      }
+
+      @container (min-width: 36em) {
+        &:first-child td:not(:first-child) span,
+        &:last-child td:not(:first-child) span {
+          left: 50%;
+          transform: translate(-50%, 0);
+          text-align: center;
+        }
+      }
+
+      td:first-child {
+        &[data-label]:before {
+          display: none;
+        }
+      }
+    }
+
+    /*  change the look of chart when crowded */
+    @container (max-width: 36em) {
+      tbody:has(tr:nth-child(5) td:nth-child(4)) tr,
+      tbody:has(tr:nth-child(10)) tr {
+        td:first-child {
+          display: none;
+        }
+
+        &:first-child td:first-child {
+          left: 0%;
+          transform: translate(0, 0);
+          display: block;
+          text-align: left;
+        }
+        &:last-child td:first-child {
+          left: 100%;
+          transform: translate(-100%, 0);
+          display: block;
+          text-align: right;
+        }
+
+        &:first-child td:not(:first-child) span {
+          left: -20%;
+          transform: translate(0%, 0);
+          text-align: left;
+        }
+
+        &:last-child td:not(:first-child) span {
+          left: 120%;
+          transform: translate(-100%, 0);
+          text-align: right;
+        }
+      }
+    }
+    /*  Hide labels when it gets crowded */
+    @container (min-width: 62em) {
+      tbody:has(tr:nth-child(25)) {
+        tr td:first-child {
+          display: none !important;
+        }
+
+        tr:is(:first-child, :nth-child(5n)) td:first-child {
+          display: block !important;
+        }
+      }
+
+      tbody:has(tr:nth-child(50)) {
+        tr:is(:first-child, :nth-child(5n)) td:first-child,
+        tr td:first-child {
+          display: none !important;
+        }
+
+        tr:is(:first-child, :nth-child(10n)) td:first-child {
+          display: block !important;
+        }
+      }
+
+      tbody:has(tr:nth-child(100)) {
+        tr:is(:first-child, :nth-child(10n)) td:first-child,
+        tr td:first-child {
+          display: none !important;
+        }
+
+        tr:is(:first-child, :nth-child(20n)) td:first-child {
+          display: block !important;
+        }
+      }
+    }
+
+    /*  Hide items when theres too many too display */
+    tbody:has(tr:nth-child(1001)) {
+      tr {
+        display: none;
+      }
+
+      tr:nth-last-child(-n + 1001) ~ tr {
+        display: flex;
+      }
+    }
+  }
+
+  .line,
+  .pie {
+    display: none;
+  }
+}
+/* #endregion */
+
+/* #region Bar chart */
+@mixin barchart($selector) {
+  #{$selector} {
+    tbody {
+      --chart-direction: 90deg;
+      --chart-day-bg-pos: calc(var(--single-day) * 7) 100%;
+      --bar-gap: 0;
+    }
+
+    .chart__guidelines {
+      position: absolute;
+
+      .guideline {
+        bottom: auto;
+        left: var(--percent);
+        height: 100%;
+        border-left: 1px dashed #eee;
+        width: 0;
+
+        span {
+          display: block;
+          font-size: var(--label-size);
+          position: absolute;
+          top: 100%;
+          transform: translate(-50%, 0.2em);
+        }
+      }
+    }
+
+    .chart__yaxis {
+      display: none;
+    }
+
+    table {
+      padding-top: 0;
+    }
+
+    table tbody {
+      flex-direction: column;
+      position: relative;
+    }
+
+    table tbody tr {
+      flex-direction: column;
+      align-items: flex-start;
+      margin-bottom: 0.5rem;
+      padding: 0;
+
+      td {
+        height: 3rem;
+        bottom: 0;
+        left: var(--bottom, 0%);
+        width: var(--comparison, var(--percent));
+        max-width: 100%;
+        border-top-left-radius: 0;
+        border-bottom-right-radius: 4px;
+      }
+
+      td:first-child {
+        position: static;
+        transform: none;
+        display: block !important;
+        max-height: 1.5rem;
+      }
+    }
+
+    &[data-longest-label] {
+      &:before {
+        display: block;
+        content: attr(data-longest-label);
+        font-size: var(--label-size);
+        padding-right: 0.5em;
+        opacity: 0;
+        pointer-events: none;
+        white-space: nowrap;
+      }
+    }
+
+    &[data-longest-label] table tbody tr {
+      td:first-child {
+        position: absolute;
+        transform: translate(-100%, -50%) !important;
+        display: block !important;
+        max-height: 1.5rem;
+        z-index: var(--index-above);
+        top: 50%;
+        left: 0 !important;
+        padding-right: 0.5em;
+      }
+    }
+  }
+}
+
+@include barchart('.chart__outer ' + $bar-chart);
+
+@container (max-width: 36em) {
+  @include barchart('.chart__outer ' + $responsive-chart);
+}
+/* #endregion */
+
+/* #region stacked */
+input[type='radio']:not([value='pie'])[value='stacked']:checked ~ .chart__wrapper {
+  table tbody tr {
+    --bar-gap: 0;
+    flex-direction: column-reverse;
+    justify-content: flex-start;
+    align-items: center;
+
+    td {
+      border-radius: 0 !important;
+    }
+  }
+}
+/* #endregion */
+
+/* #region Scatter and line chart */
+#{'.chart__outer ' + $scatter-line-chart} {
+  table tbody {
+    justify-content: space-between;
+
+    tr {
+      td:not(.chart__bar):first-child {
+        left: 50% !important;
+        width: 4rem;
+      }
+    }
+  }
+}
+
+#{'.chart__outer ' + $scatter-line-chart} {
+  table tbody {
+    tr:not(:has(.chart__bar)) {
+      width: 2px;
+      margin-left: -1px;
+      margin-right: -1px;
+      padding: 0;
+    }
+
+    tr {
+      td:not(.chart__bar):not(:first-child) {
+        position: absolute;
+        left: 50%;
+        bottom: calc(var(--axis));
+        height: 6px;
+        width: 6px;
+        margin-bottom: -3px;
+        margin-left: -3px;
+        border-radius: 3px;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+
+      &:before {
+        content: '';
+        border-left: 1px dashed #eeeeee;
+        height: 100%;
+        width: 0;
+        position: absolute;
+        top: 0;
+        left: 50%;
+        height: 100%;
+        margin-left: -1px;
+        z-index: var(--index-below);
+        opacity: 0;
+      }
+
+      &:hover {
+        &:before {
+          opacity: 1;
+        }
+      }
+
+      &:is([data-event], [data-event-right]) {
+        &:before {
+          opacity: 1;
+          border-left: 1px dashed #000000;
+        }
+        &:after {
+          content: attr(data-event);
+          position: absolute;
+          top: 0;
+          left: 50%;
+          width: max-content;
+          z-index: var(--index-below);
+          font-size: var(--label-size);
+          background: rgba(255, 255, 255, 0.5);
+        }
+      }
+      &[data-event] {
+        &:after {
+          transform: translate(-50%, -0.5em);
+        }
+      }
+      &[data-event-right] {
+        &:after {
+          transform: translate(-101%, -0.5em);
+        }
+      }
+      &[data-event-left] {
+        &:after {
+          transform: translate(1%, -0.5em);
+        }
+      }
+    }
+  }
+
+  .pie {
+    display: none;
+  }
+}
+
+#{':host([data-increment][data-start][data-end]) .chart__outer ' + $scatter-line-chart} {
+  table tbody tr {
+    position: absolute;
+    left: var(--position);
+
+    td:first-child {
+      display: none;
+    }
+  }
+
+  .slope {
+    pointer-events: none;
+  }
+  .slope svg {
+    color: black;
+    stroke: currentColor;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    stroke-width: var(--line-thickness);
+    width: 100%;
+    height: calc(100% - 1rem);
+    pointer-events: none;
+    z-index: var(--index-above);
+  }
+}
+/* #endregion */
+
+/* #region Line chart */
+#{'.chart__outer ' + $line-chart} {
+  .chart__lines ~ table tbody {
+    tr {
+      td:not(.chart__bar):not(:first-child):not(:hover) {
+        opacity: 0;
+      }
+    }
+  }
+
+  .line {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    stroke-width: var(--line-thickness);
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: var(--index-above);
+  }
+}
+/* #endregion */
+
+/* #region Pie chart */
+#{'.chart__outer ' + $pie-chart} {
+  margin-bottom: 2rem;
+
+  .chart__yaxis,
+  .line {
+    display: none;
+  }
+  table {
+    display: none;
+  }
+
+  .pies {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 2rem;
+  }
+
+  .pie {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    min-width: 12.5rem; /* 200 */
+    flex: 1 1 auto;
+    display: inline-block;
+    max-width: var(--pie-size);
+
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .pie svg {
+    width: 100%;
+    height: 100%;
+
+    path:hover {
+      transform: scale(1.05);
+    }
+  }
+
+  .pie > div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    background: var(--body-colour-set);
+    border-radius: 50%;
+    z-index: var(--index-focus);
+    padding: 1rem;
+    aspect-ratio: 1/1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 67%;
+
+    span {
+      text-align: center;
+      display: block;
+    }
+  }
+
+  .pie:has(path:hover) > div {
+    display: none;
+  }
+
+  .pie foreignObject {
+    background: var(--body-colour-set);
+    border-radius: 50%;
+    z-index: var(--index-focus);
+    pointer-events: none;
+    display: none;
+    padding: 1rem;
+
+    div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+    }
+    span {
+      text-align: center;
+      display: block;
+    }
+  }
+
+  .pie {
+    path:nth-child(1):hover ~ foreignObject:nth-of-type(1),
+    path:nth-child(2):hover ~ foreignObject:nth-of-type(2),
+    path:nth-child(3):hover ~ foreignObject:nth-of-type(3),
+    path:nth-child(4):hover ~ foreignObject:nth-of-type(4),
+    path:nth-child(5):hover ~ foreignObject:nth-of-type(5),
+    path:nth-child(6):hover ~ foreignObject:nth-of-type(6),
+    path:nth-child(7):hover ~ foreignObject:nth-of-type(7),
+    path:nth-child(8):hover ~ foreignObject:nth-of-type(8),
+    path:nth-child(9):hover ~ foreignObject:nth-of-type(9) {
+      display: block;
+    }
+  }
+}
+/* #endregion */
+
+/* #region Modifiers */
+
+/* #region Display data modifier class */
+:host(.chart--display-data) {
+  table tbody tr {
+    td:not(:first-child) {
+      span {
+        &:before {
+          display: none;
+        }
+        opacity: 1 !important;
+        z-index: var(--index-above);
+        top: 0%;
+        transform: translate(-50%, 0%) !important;
+        display: block !important;
+        height: fit-content;
+
+        margin: 0;
+      }
+    }
+  }
+
+  #{$bar-chart} table tbody tr td:not(:first-child) {
+    span {
+      top: 50%;
+      right: 0;
+      left: 0;
+      transform: translate(0%, -50%) !important;
+      text-align: right;
+      width: calc(100% - 0.4rem);
+      min-width: fit-content;
+      padding: 0 0.1rem;
+      border-radius: 0;
+    }
+  }
+
+  #{$scatter-line-chart} table tbody tr td:not(:first-child) {
+    span {
+      bottom: 0.25rem;
+      top: auto;
+    }
+  }
+
+  #{$line-chart} .chart__lines ~ table tbody tr td:not(:first-child):not(:hover) {
+    opacity: 1;
+  }
+}
+/* #endregion */
+
+/* #region show chart totals */
+:host(.chart--show-totals) {
+  .chart__key {
+    .key {
+      .chart__total {
+        display: flex;
+        font-size: var(--label-size);
+        font-weight: bold;
+        line-height: 1;
+        padding-left: 1.5em;
+      }
+
+      .chart__total__number {
+        margin-right: 1rem;
+      }
+      .chart__total__percent {
+        margin-left: auto;
+      }
+    }
+  }
+}
+/* #endregion */
+
+/* #endregion */
+
+/* #region aniamtion */
+
+#{'.chart--animate.animating.inview'} {
+  --animation-left: 2s;
+
+  table tbody tr td:not(:first-child) {
+    transition:
+      height 2s ease-out,
+      width 2s ease-out,
+      bottom 2s ease-out,
+      left var(--animation-left) ease-out;
+    transition-delay: calc(var(--row-index) * 0.1s);
+  }
+}
+
+#{'.chart--animate:not(.inview)'} {
+  table tbody tr td:not(:first-child) {
+    --bottom: var(--min-bottom, 0%) !important;
+    --percent: 0% !important;
+    --axis: 0% !important;
+    --comparison: 0% !important;
+  }
+}
+
+/*
+#{'.chart--animate.animating.inview '+comparison-chart} {
+
+  --animation-left: 0s;
+}
+
+#{'.chart--animate:not(.inview) '+comparison-chart} {
+
+  table tbody tr td:not(:first-child) {
+
+    --comparison: 50%!important;
+  }
+}
+*/
+
+/* #region Animate bar and column chart */
+#{'.chart--animate.animating ' + $default-chart} {
+  table tbody tr td:not(:first-child) {
+    overflow: hidden;
+  }
+}
+/* #endregion */
+
+/* #region scatter and line charts */
+
+#{'.chart--animate:not(.inview) ' + $scatter-line-chart} {
+  table tbody tr td:not(:first-child) {
+    --percent: 0% !important;
+  }
+}
+
+#{'.chart--animate.animating ' + $scatter-line-chart} {
+  .slope path {
+    transition: 2s ease-out;
+  }
+}
+
+#{'.chart--animate:not(.inview) ' + $scatter-line-chart} {
+  .slope path {
+    d: var(--path);
+  }
+}
+
+/*  Line chart */
+#{'.chart--animate.animating '+$line-chart}
+/* #{'.chart--animate '+proportional-chart}, */
+/* #{'.chart--animate '+combo-chart} */
+{
+  .line path {
+    transition: 2s ease-out;
+  }
+}
+
+#{'.chart--animate:not(.inview) '+$line-chart}
+/* #{'.chart--animate:not(.inview) '+proportional-chart}, */
+/* #{'.chart--animate:not(.inview) '+combo-chart} */
+{
+  .line path {
+    d: var(--path);
+  }
+}
+/* #endregion */
+
+/* #region pie charts */
+#{'.chart--animate ' + $pie-chart} {
+  .pie path {
+    transition: calc(2s * var(--second-fraction, 1)) ease-out;
+    transition-delay: calc((var(--row-index) * var(--path-index)) * 0.1s);
+  }
+}
+
+#{'.chart--animate:not(.inview) ' + $pie-chart} {
+  .pie path {
+    transform: scale(60%) !important;
+  }
+}
+/*#{'.chart--animate:not(.inview) '+polar-chart} 
+{
+  .pie path {
+    transform: scale(40%) !important;
+  }
+}
+*/
+/* #endregion */
+
+/* #endregion */