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

package/assets/sass/components/charts.module.scss

@@ -1,588 +1,588 @@
-@use 'sass:map';
-
-@use '../_func' as *;
-
-@for $i from 1 through 10 {
-  .chart__key .key:nth-child(11n - #{11 - $i}),
-  .chart__outer table tbody tr td:not(:first-child):nth-child(11n - #{11 - ($i+1)}) {
-    --chart-colour: var(#{'--chart-colour-' + $i});
-  }
-
-  .chart__outer
-    table
-    tbody
-    tr:nth-child(#{$i}):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1])
-    td:nth-child(2) {
-    --chart-colour: var(#{'--chart-colour-' + $i});
-  }
-}
-// #endregion
-
-// #region Basic setup - including: container setup, css vars
-
-::slotted(table) {
-  display: none !important;
-}
-:host {
-  container-type: inline-size;
-  margin-bottom: 2rem;
-  display: block;
-}
-.chart__outer {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  font-weight: var(--chart-font-weight, bold);
-  color: var(--chart-text-color, black);
-
-  --chart-height: 7.5rem;
-  --chart-height-lg: 12.5rem;
-  --chart-height-resp: var(--chart-height);
-
-  // 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;
-  --line-thickness: 1px;
-  --yaxis-width: auto;
-  --yaxis-point-display: block;
-  --yaxis-last-point-transform: translate(0, -50%);
-  --bar-gap: min(10%, 0.75rem);
-
-  > * {
-    display: block;
-    order: 2;
-  }
-
-  tbody {
-    --chart-direction: 360deg;
-    --chart-day-bg-pos: 100% calc(var(--single-day) * 7);
-  }
-
-  @container (min-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;
-    }
-
-    .chart__wrapper {
-      --chart-height-resp: var(--chart-height-lg);
-      --line-thickness: 0.8px;
-      --yaxis-width: auto;
-      --yaxis-point-display: block;
-      --yaxis-last-point-transform: translate(0, -50%);
-    }
-  }
-
-  @container (min-width: 62em) {
-    :has(tr:nth-child(10)) {
-      --bar-gap: 0;
-    }
-
-    .chart__wrapper {
-      --label-size: 0.875rem; /* 14/16 */
-      --line-thickness: 0.5px;
-    }
-  }
-
-  .chart__spacer span {
-    opacity: 0;
-  }
-}
-// #endregion
-
-// #region Chart key
-.chart__outer > input[type='checkbox'] {
-  opacity: 0;
-  position: absolute;
-  pointer-events: none;
-  bottom: 50%;
-  left: 50%;
-}
-
-.chart__key {
-  padding: 0 0 0 0;
-  margin-bottom: 1.5rem;
-  display: flex;
-  overflow: auto;
-  scroll-snap-type: x mandatory;
-  scroll-padding: 0.75rem;
-  //justify-content: flex-end;
-  column-gap: 0.5rem;
-
-  &:has(label:first-child:last-child) {
-    display: var(--single-key-display, none);
-  }
-
-  .key {
-    margin: 0 !important;
-
-    &:before {
-      content: '';
-      height: 0.8em;
-      width: 0.8em;
-      margin-right: 0.3em !important;
-      background-color: var(--chart-colour);
-      display: inline-block;
-      border-radius: var(--key-border-radius, 4px);
-    }
-
-    &[data-label='Min'],
-    &[data-label='Max'] {
-      display: none;
-    }
-
-    .chart__total {
-      display: none;
-    }
-  }
-}
-
-@for $i from 1 to 10 {
-  .chart__outer input[type='checkbox']:focus:nth-child(#{$i}) ~ .chart__key .key:nth-child(#{$i}) {
-    background: var(--colour-btn-action-hover-bg) !important;
-    border: var(--btn-border-width) solid var(--colour-muted) !important;
-  }
-}
-
-// Hide chart keys
-.chart__outer > input[type='checkbox']:not(:checked) ~ .chart__key .key {
-  //opacity: 0.25;
-}
-
-@for $i from 1 to 11 {
-  .chart__outer > input[type='checkbox']:nth-of-type(#{$i}):not(:checked) ~ .chart__key .key:nth-of-type(#{$i}) {
-    opacity: 0.25;
-  }
-}
-// #endregion
-
-// #region y-axis
-:host([data-yaxis]) {
-  --yaxis-display: flex;
-}
-
-.chart__yaxis {
-  display: var(--yaxis-display, none);
-  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);
-      font-weight: var(--chart-yaxis-fw, normal);
-      font-size: var(--chart-yaxis-fs, 0.75rem);
-      color: var(--colour-body);
-    }
-
-    &:last-child span {
-      transform: var(--yaxis-last-point-transform);
-    }
-  }
-}
-// #endregion
-
-// #region X-axis
-.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%;
-    }
-  }
-}
-// #endregion
-
-// #region Guidelines
-.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);
-    }
-  }
-}
-// #endregion
-
-// #region tooltip
-
-[part='popover'] {
-  //part="popover"
-  position: absolute;
-  top: var(--cursor-y, 50%);
-  left: var(--cursor-x, 50%);
-  font-size: var(--label-size);
-  line-height: 1.2;
-  background: var(--chart-details-bg, var(--colour-canvas-2, Canvas));
-  opacity: 0;
-  pointer-events: none;
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-  margin-bottom: 0.25rem;
-  display: block;
-  //color: var(--colour-primary-theme);
-  white-space: pre;
-  text-align: left;
-  box-shadow: var(--chart-details-shadow, 0 0.125rem 0.75rem rgba(0, 0, 0, 0.25));
-  transform: translate(-50%, -100%);
-
-  &::before {
-    content: attr(data-group) '\A';
-  }
-
-  &[data-label]::before {
-    content: attr(data-group) '\A' attr(data-label) '\A';
-  }
-
-  &:has(:is(a, button)) {
-    top: 0;
-    left: 50%;
-    transform: translate(-50%, -100%);
-    font-size: 0.9rem;
-  }
-
-  hr {
-    margin: 0;
-    opacity: 0;
-  }
-  :is(a, button) {
-    display: inline-block !important;
-    clear: both !important;
-    float: left !important;
-    margin-top: 1rem !important;
-    margin-right: 1rem !important;
-    margin-bottom: 0.25em !important;
-    font-size: 1em !important;
-  }
-
-  :is(a, button) + :is(a, button) {
-    margin-top: 0 !important;
-  }
-}
-
-// #endregion
-
-// #region Default column chart (Also applies to line chart)
-.chart__wrapper {
-  display: block;
-  display: flex;
-  flex-direction: row;
-  position: relative;
-
-  .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: var(--chart-bar-alignment, left);
-      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 {
-        // part=xaxis
-        position: absolute;
-        top: 100%;
-        left: 0%;
-        width: fit-content;
-        padding: 0;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-size: var(--label-size);
-        text-align: center;
-
-        @container (min-width: 62em) {
-          display: block;
-        }
-
-        button {
-          all: unset;
-          cursor: pointer;
-        }
-      }
-
-      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: 7.5rem; /* 120 */
-        position: relative;
-        padding: 0;
-        background: var(--chart-colour);
-
-        border-top-right-radius: 4px;
-        border-top-left-radius: 4px;
-
-        & {
-          @media screen and (prefers-color-scheme: dark) {
-            background: color-mix(in oklab, var(--chart-colour), black 20%);
-          }
-        }
-
-        &:hover {
-          background: color-mix(in oklab, var(--chart-colour), #000000 5%);
-        }
-
-        &:has(span:empty),
-        &:empty {
-          display: none;
-        }
-
-        &[data-label]:before {
-          display: none;
-        }
-
-        &:hover [part='popover'] {
-          opacity: 1;
-          z-index: var(--index-above);
-          pointer-events: all;
-        }
-      }
-
-      td:first-child {
-        &[data-label]:before {
-          display: none;
-        }
-      }
-    }
-
-    // change the look of chart when crowded
-    @container (min-width: 62em) {
-      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: 36em) {
-      tbody:has(tr:nth-child(25)) {
-        tr td:first-child {
-          display: none !important;
-        }
-
-        tr:is(:first-child, :nth-child(2n + 1)) td:first-child {
-          display: block !important;
-        }
-      }
-
-      tbody:has(tr:nth-child(50)) {
-        tr:is(:first-child, :nth-child(2n + 1)) td:first-child,
-        tr td:first-child {
-          display: none !important;
-        }
-
-        tr:is(:first-child, :nth-child(10n + 1)) td:first-child {
-          display: block !important;
-        }
-      }
-
-      tbody:has(tr:nth-child(100)) {
-        tr:is(:first-child, :nth-child(10n + 1)) td:first-child,
-        tr td:first-child {
-          display: none !important;
-        }
-
-        tr:is(:first-child, :nth-child(20n + 1)) td:first-child {
-          display: block !important;
-        }
-      }
-    }
-  }
-}
-// #endregion
-
-// #region Chart colour overide classes
-:host(.chart-colour--success) td,
-:host(:is(.chart-colour--success, .chart-colour--danger, .chart-colour--wraning)) td.chart-colour--success,
-.chart-colour--success td {
-  --chart-colour: var(--chart-colour-success) !important;
-}
-
-:host(.chart-colour--danger) td,
-:host(:is(.chart-colour--success, .chart-colour--danger, .chart-colour--wraning)) td.chart-colour--danger,
-.chart-colour--danger,
-.chart-colour--danger td {
-  --chart-colour: var(--chart-colour-danger) !important;
-}
-
-:host(.chart-colour--warning) td,
-:host(:is(.chart-colour--success, .chart-colour--danger, .chart-colour--wraning)) td.chart-colour--warning,
-.chart-colour--warning,
-.chart-colour--warning td {
-  --chart-colour: var(--chart-colour-warning) !important;
-}
-// #endregion
-
-// #region Hide data sets
-.chart__outer > input[type='checkbox']:not(:checked) ~ .chart__wrapper table tbody tr td:not(:first-child) {
-  //display: none;
-}
-
-@for $i from 1 to 11 {
-  .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: none;
-    opacity: 0;
-  }
-}
-// #endregion
+@use 'sass:map';
+
+@use '../_func' as *;
+
+@for $i from 1 through 10 {
+  .chart__key .key:nth-child(11n - #{11 - $i}),
+  .chart__outer table tbody tr td:not(:first-child):nth-child(11n - #{11 - ($i+1)}) {
+    --chart-colour: var(#{'--chart-colour-' + $i});
+  }
+
+  .chart__outer
+    table
+    tbody
+    tr:nth-child(#{$i}):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1])
+    td:nth-child(2) {
+    --chart-colour: var(#{'--chart-colour-' + $i});
+  }
+}
+/* #endregion */
+
+/* #region Basic setup - including: container setup, css vars */
+
+::slotted(table) {
+  display: none !important;
+}
+:host {
+  container-type: inline-size;
+  margin-bottom: 2rem;
+  display: block;
+}
+.chart__outer {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  font-weight: var(--chart-font-weight, bold);
+  color: var(--chart-text-color, black);
+
+  --chart-height: 7.5rem;
+  --chart-height-lg: 12.5rem;
+  --chart-height-resp: var(--chart-height);
+
+  /*  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;
+  --line-thickness: 1px;
+  --yaxis-width: auto;
+  --yaxis-point-display: block;
+  --yaxis-last-point-transform: translate(0, -50%);
+  --bar-gap: min(10%, 0.75rem);
+
+  > * {
+    display: block;
+    order: 2;
+  }
+
+  tbody {
+    --chart-direction: 360deg;
+    --chart-day-bg-pos: 100% calc(var(--single-day) * 7);
+  }
+
+  @container (min-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;
+    }
+
+    .chart__wrapper {
+      --chart-height-resp: var(--chart-height-lg);
+      --line-thickness: 0.8px;
+      --yaxis-width: auto;
+      --yaxis-point-display: block;
+      --yaxis-last-point-transform: translate(0, -50%);
+    }
+  }
+
+  @container (min-width: 62em) {
+    :has(tr:nth-child(10)) {
+      --bar-gap: 0;
+    }
+
+    .chart__wrapper {
+      --label-size: 0.875rem; /* 14/16 */
+      --line-thickness: 0.5px;
+    }
+  }
+
+  .chart__spacer span {
+    opacity: 0;
+  }
+}
+/* #endregion */
+
+/* #region Chart key */
+.chart__outer > input[type='checkbox'] {
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+  bottom: 50%;
+  left: 50%;
+}
+
+.chart__key {
+  padding: 0 0 0 0;
+  margin-bottom: 1.5rem;
+  display: flex;
+  overflow: auto;
+  scroll-snap-type: x mandatory;
+  scroll-padding: 0.75rem;
+  /* justify-content: flex-end; */
+  column-gap: 0.5rem;
+
+  &:has(label:first-child:last-child) {
+    display: var(--single-key-display, none);
+  }
+
+  .key {
+    margin: 0 !important;
+
+    &:before {
+      content: '';
+      height: 0.8em;
+      width: 0.8em;
+      margin-right: 0.3em !important;
+      background-color: var(--chart-colour);
+      display: inline-block;
+      border-radius: var(--key-border-radius, 4px);
+    }
+
+    &[data-label='Min'],
+    &[data-label='Max'] {
+      display: none;
+    }
+
+    .chart__total {
+      display: none;
+    }
+  }
+}
+
+@for $i from 1 to 10 {
+  .chart__outer input[type='checkbox']:focus:nth-child(#{$i}) ~ .chart__key .key:nth-child(#{$i}) {
+    background: var(--colour-btn-action-hover-bg) !important;
+    border: var(--btn-border-width) solid var(--colour-muted) !important;
+  }
+}
+
+/*  Hide chart keys */
+.chart__outer > input[type='checkbox']:not(:checked) ~ .chart__key .key {
+  /* opacity: 0.25; */
+}
+
+@for $i from 1 to 11 {
+  .chart__outer > input[type='checkbox']:nth-of-type(#{$i}):not(:checked) ~ .chart__key .key:nth-of-type(#{$i}) {
+    opacity: 0.25;
+  }
+}
+/* #endregion */
+
+/* #region y-axis */
+:host([data-yaxis]) {
+  --yaxis-display: flex;
+}
+
+.chart__yaxis {
+  display: var(--yaxis-display, none);
+  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); */
+      font-weight: var(--chart-yaxis-fw, normal);
+      font-size: var(--chart-yaxis-fs, 0.75rem);
+      color: var(--colour-body);
+    }
+
+    &:last-child span {
+      transform: var(--yaxis-last-point-transform);
+    }
+  }
+}
+/* #endregion */
+
+/* #region X-axis */
+.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%;
+    }
+  }
+}
+/* #endregion */
+
+/* #region Guidelines */
+.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);
+    }
+  }
+}
+/* #endregion */
+
+/* #region tooltip */
+
+[part='popover'] {
+  /* part="popover" */
+  position: absolute;
+  top: var(--cursor-y, 50%);
+  left: var(--cursor-x, 50%);
+  font-size: var(--label-size);
+  line-height: 1.2;
+  background: var(--chart-details-bg, var(--colour-canvas-2, Canvas));
+  opacity: 0;
+  pointer-events: none;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  margin-bottom: 0.25rem;
+  display: block;
+  /* color: var(--colour-primary-theme); */
+  white-space: pre;
+  text-align: left;
+  box-shadow: var(--chart-details-shadow, 0 0.125rem 0.75rem rgba(0, 0, 0, 0.25));
+  transform: translate(-50%, -100%);
+
+  &::before {
+    content: attr(data-group) '\A';
+  }
+
+  &[data-label]::before {
+    content: attr(data-group) '\A' attr(data-label) '\A';
+  }
+
+  &:has(:is(a, button)) {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -100%);
+    font-size: 0.9rem;
+  }
+
+  hr {
+    margin: 0;
+    opacity: 0;
+  }
+  :is(a, button) {
+    display: inline-block !important;
+    clear: both !important;
+    float: left !important;
+    margin-top: 1rem !important;
+    margin-right: 1rem !important;
+    margin-bottom: 0.25em !important;
+    font-size: 1em !important;
+  }
+
+  :is(a, button) + :is(a, button) {
+    margin-top: 0 !important;
+  }
+}
+
+/* #endregion */
+
+/* #region Default column chart (Also applies to line chart) */
+.chart__wrapper {
+  display: block;
+  display: flex;
+  flex-direction: row;
+  position: relative;
+
+  .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: var(--chart-bar-alignment, left);
+      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 {
+        /*  part=xaxis */
+        position: absolute;
+        top: 100%;
+        left: 0%;
+        width: fit-content;
+        padding: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: var(--label-size);
+        text-align: center;
+
+        @container (min-width: 62em) {
+          display: block;
+        }
+
+        button {
+          all: unset;
+          cursor: pointer;
+        }
+      }
+
+      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: 7.5rem; /* 120 */
+        position: relative;
+        padding: 0;
+        background: var(--chart-colour);
+
+        border-top-right-radius: 4px;
+        border-top-left-radius: 4px;
+
+        & {
+          @media screen and (prefers-color-scheme: dark) {
+            background: color-mix(in oklab, var(--chart-colour), black 20%);
+          }
+        }
+
+        &:hover {
+          background: color-mix(in oklab, var(--chart-colour), #000000 5%);
+        }
+
+        &:has(span:empty),
+        &:empty {
+          display: none;
+        }
+
+        &[data-label]:before {
+          display: none;
+        }
+
+        &:hover [part='popover'] {
+          opacity: 1;
+          z-index: var(--index-above);
+          pointer-events: all;
+        }
+      }
+
+      td:first-child {
+        &[data-label]:before {
+          display: none;
+        }
+      }
+    }
+
+    /*  change the look of chart when crowded */
+    @container (min-width: 62em) {
+      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: 36em) {
+      tbody:has(tr:nth-child(25)) {
+        tr td:first-child {
+          display: none !important;
+        }
+
+        tr:is(:first-child, :nth-child(2n + 1)) td:first-child {
+          display: block !important;
+        }
+      }
+
+      tbody:has(tr:nth-child(50)) {
+        tr:is(:first-child, :nth-child(2n + 1)) td:first-child,
+        tr td:first-child {
+          display: none !important;
+        }
+
+        tr:is(:first-child, :nth-child(10n + 1)) td:first-child {
+          display: block !important;
+        }
+      }
+
+      tbody:has(tr:nth-child(100)) {
+        tr:is(:first-child, :nth-child(10n + 1)) td:first-child,
+        tr td:first-child {
+          display: none !important;
+        }
+
+        tr:is(:first-child, :nth-child(20n + 1)) td:first-child {
+          display: block !important;
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+
+/* #region Chart colour overide classes */
+:host(.chart-colour--success) td,
+:host(:is(.chart-colour--success, .chart-colour--danger, .chart-colour--wraning)) td.chart-colour--success,
+.chart-colour--success td {
+  --chart-colour: var(--chart-colour-success) !important;
+}
+
+:host(.chart-colour--danger) td,
+:host(:is(.chart-colour--success, .chart-colour--danger, .chart-colour--wraning)) td.chart-colour--danger,
+.chart-colour--danger,
+.chart-colour--danger td {
+  --chart-colour: var(--chart-colour-danger) !important;
+}
+
+:host(.chart-colour--warning) td,
+:host(:is(.chart-colour--success, .chart-colour--danger, .chart-colour--wraning)) td.chart-colour--warning,
+.chart-colour--warning,
+.chart-colour--warning td {
+  --chart-colour: var(--chart-colour-warning) !important;
+}
+/* #endregion */
+
+/* #region Hide data sets */
+.chart__outer > input[type='checkbox']:not(:checked) ~ .chart__wrapper table tbody tr td:not(:first-child) {
+  /* display: none; */
+}
+
+@for $i from 1 to 11 {
+  .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: none;
+    opacity: 0;
+  }
+}
+/* #endregion */