libs/barista-components/stacked-series-chart/src/stacked-series-chart-column.scss
@use 'sass:math';
@import './stacked-series-chart-shared';
@import './stacked-series-chart-theme';

/** HOW TO of layout

See stacked-series-chart.layout.md
*/
$track-wrapper-width: calc(
  (var(--dt-stacked-series-chart-max-bar-size) + #{$gap}) *
    calc(var(--dt-stacked-series-chart-track-amount) - 1)
);
$track-wrapper-margin-left: calc(
  #{$gap} + var(--dt-stacked-series-chart-extra-margin)
);
$track-wrapper-margin-right: calc(
  (#{$gap} * 1) + #{$tick-gutter} + var(--dt-stacked-series-chart-extra-margin)
);
$heat-field-height: calc(#{$heat-field-size-by-levels} + #{$heat-field-margin});

:host {
  --dt-stacked-series-chart-extra-margin: calc(
    #{$column-extra-margin-default} * 1px
  );
}

:host(.dt-stacked-series-chart-column) {
  .dt-stacked-series-chart-track-label-wrapper,
  .dt-stacked-series-chart-track-wrapper,
  .dt-stacked-series-chart-heat-field-wrapper {
    position: relative;
    min-width: $track-wrapper-width;
    grid-column: 2;
    margin-left: $track-wrapper-margin-left;
    margin-right: $track-wrapper-margin-right;
  }

  .dt-stacked-series-chart-track-label-wrapper {
    display: grid;
  }

  .dt-stacked-series-chart-track-wrapper,
  .dt-stacked-series-chart-heat-field-wrapper {
    grid-row: 1;
  }

  .dt-stacked-series-chart-track-wrapper {
    height: calc(100% - #{math.div($axis-width, 2)});
  }

  .dt-stacked-series-chart-heat-field-wrapper {
    height: $heat-field-size-by-levels;
    margin-top: calc(#{$heat-field-height} * -1);
  }

  .dt-stacked-series-chart-track-label {
    position: relative;
    left: var(--dt-stacked-series-chart-tick-position);
    bottom: 0;
    transform: translate(-50%, 0%);

    grid-row: 1;
    grid-column: 1;

    white-space: nowrap;

    &::after {
      position: absolute;
      display: block;
      background: $axis-color;
      width: 1px;
      height: $tick-length;
      top: -$tick-gutter;
      right: 50%;
      content: ' ';
    }
  }

  .dt-stacked-series-chart-track {
    position: absolute;
    left: var(--dt-stacked-series-chart-tick-position);
    transform: translate(-50%, 0%);
    width: 100%;
    max-width: var(--dt-stacked-series-chart-max-bar-size);
    height: 100%;

    grid-row: 1;
    flex-direction: column-reverse;
  }

  .dt-stacked-series-chart-container {
    $padding-top: 8px;
    grid-template-rows: 1fr auto;
    grid-template-columns: 0fr 1fr;
    padding-top: $padding-top;
    overflow-x: auto;

    &.dt-stacked-series-chart-scale-point {
      grid-template-columns: 0fr 1fr;
    }

    &.dt-stacked-series-chart-has-heat-field {
      padding-top: calc(#{$heat-field-size-by-levels} + #{$padding-top});
    }

    &.dt-stacked-series-chart-series-axis-auto-mode,
    &.dt-stacked-series-chart-series-axis-compact-mode {
      .dt-stacked-series-chart-track-label-content {
        display: block;
        white-space: nowrap;
        padding: 0 math.div($tick-gutter, 2);
      }
    }

    &:not(.dt-stacked-series-chart-series-axis-compact-mode)
      .dt-stacked-series-chart-track-label,
    .dt-stacked-series-chart-track-label-default {
      display: flex;
      justify-content: center;
      width: 0;
    }

    &.dt-stacked-series-chart-series-axis-compact-mode {
      $track-label-default: '.dt-stacked-series-chart-track-label-default';
      .dt-stacked-series-chart-track-label:not(#{$track-label-default}) {
        width: 14px;
        height: 72px;

        .dt-stacked-series-chart-track-label-content {
          width: 85px;
          position: absolute;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          transform: translate(10%, -30%) rotate(45deg);
          transform-origin: top left;
          white-space: nowrap;
          text-align: left;
        }
      }
    }
  }

  .dt-stacked-series-chart-label-none {
    gap: 0;
    grid-template-rows: 1fr;
  }

  /* SLICE */
  .dt-stacked-series-chart-slice {
    height: var(--dt-stacked-series-chart-length);
  }

  .dt-stacked-series-chart-node .dt-stacked-series-chart-slice-selected,
  .dt-stacked-series-chart-track-selected.dt-stacked-series-chart-stack {
    &::before {
      box-shadow: $selected-size 0 $selected-color inset,
        -$selected-size 0 $selected-color inset;
      right: -$selected-size;
      left: -$selected-size;
      top: 0;
      bottom: 0;
      pointer-events: none;
    }
  }

  /* AXIS */
  .dt-stacked-series-chart-series-axis {
    grid-column: 1/-1;
    border-bottom: $axis-width solid $axis-color;
    width: 100%;
    grid-row: 1;
  }

  .dt-stacked-series-chart-value-axis-background {
    position: sticky;
    grid-row: 1/3;
    grid-column: 1;
    height: calc(100% + #{$heat-field-height});
    margin-top: calc(#{$heat-field-height} * -1);
    left: 0;
    background-color: $white;
  }

  .dt-stacked-series-chart-value-axis {
    position: sticky;
    left: 0;

    display: grid;
    grid-row: 1/2;
    grid-column: 1;

    border-right: $axis-width solid $axis-color;
    height: calc(100% - #{math.div($axis-width, 2)});
  }

  .dt-stacked-series-chart-axis-tick {
    @include fullWidthAxis();

    padding-right: $tick-gutter;
    justify-content: flex-end;

    &::after {
      right: -$axis-width;
      width: $tick-length;
    }
  }

  /** Heat fields */
  .dt-stacked-series-chart-heat-field,
  .dt-stacked-series-chart-heat-field-area {
    left: var(--dt-stacked-series-chart-heat-field-position);
    width: calc(
      var(--dt-stacked-series-chart-heat-field-size) - #{$heat-field-gap}
    );

    transform: translate(-50%, 0%);
  }

  .dt-stacked-series-chart-heat-field {
    top: $heat-field-margin-by-level;
    height: $heat-field-size;
    min-width: $heat-field-size;

    &.dt-stacked-series-chart-heat-field-selected {
      height: $heat-field-size-selected;
    }
  }

  .dt-stacked-series-chart-heat-field-area {
    height: 100%;
  }
}
