@eclipse-scout/chart/src/table/controls/ChartTableControl.less

Eclipse Scout chart

/*
 * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
.chart-table-control-content {
  padding: @table-control-content-padding;
}

.chart-container {
  white-space: nowrap;
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-start;

  & > .scrollbar.y-axis {
    width: 22px;
  }
}

/* chart - type select */

.chart-select {
  display: flex;
  flex-flow: column;

  width: 75px;
  margin: 25px;


  & > .icon {
    padding: 15px 0;
    margin-bottom: 8px;
    min-width: 60px;

    font-size: 26px;
    font-weight: @icon-font-weight-light;
    text-align: center;

    border-radius: @border-radius-medium;

    color: @button-color;

    &:not(.disabled) {
      cursor: pointer;

      &.selected,
      &.selected:hover {
        background-color: @default-button-background-color;
        color: @default-button-color;
      }

      &:hover {
        color: @button-hover-color;
        background-color: @hover-background-color;
      }
    }

    &.disabled {
      color: @button-disabled-color;
    }
  }
}

/* chart - axis and data select */
@chart-table-control-axis-select-width: 175px;
.axis-select-container {
  display: flex;
  position: relative;
  margin-top: 25px;
  margin-bottom: 25px;
  border: 1px solid @border-color;
  border-radius: @border-radius;
  max-height: calc(100% - 50px);
  min-height: 310px;

  & > .xaxis-select,
  & > .yaxis-select,
  & > .data-select {
    display: inline-block;
    overflow: hidden;
    width: @chart-table-control-axis-select-width;
    padding: 3px 0;
    border-left: 1px solid @border-color;
  }

  & > :first-child {
    width: @chart-table-control-axis-select-width - 1px;
    border-left: none;
  }

  & > .yaxis-select {
    &.hide {
      width: 0;
      border-width: 0;
    }

    &.animated {
      #scout.animation(show-axis-select 0.5s ease-in-out 1);

      &.hide {
        #scout.animation(hide-axis-select 0.5s ease-in-out 1);
      }
    }
  }
}

.select-axis, .select-data {
  position: relative;
  height: 30px;
  width: calc(100% - 6px);
  margin: 0 3px 2px;
  padding-left: 8px;
  padding-right: 20px;
  padding-top: @text-margin-top;
  border-radius: @border-radius;
  cursor: pointer;
  line-height: 30px;
  #scout.overflow-ellipsis();

  &:hover {
    background-color: @hover-background-color;
  }

  &:last-child {
    margin-bottom: 0;
  }

  &.selected {
    background-color: @selected-background-color;
    color: @selected-color;
  }

  &.disabled {
    cursor: default;
    background-color: @table-control-container-background-color;
    color: @table-control-disabled-color;

    &:hover {
      background-color: @table-control-container-background-color;
    }
  }

  & > .select-axis-group {
    position: relative;
    top: -7px;
    font-size: @font-size-extra-small;
    line-height: 12px;
    display: none;
  }

  &.selected > .select-axis-group {
    display: block;
  }

  &::before {
    position: absolute;
    font-size: 16px;
    line-height: 16px;
    right: 8px;
    top: 7px;
    #scout.font-icon();
  }

  &.data-count.selected::before {
    content: @icon-count;
    font-size: 20px;
    top: 6px;
    right: 5px;
  }

  &.data-sum.selected::before {
    content: @icon-sum;
  }

  &.data-avg.selected::before {
    content: @icon-avg;
  }
}

.chart-container > .chart {
  position: relative;
  flex-grow: 1;
  align-self: stretch;
  margin: 35px 25px 25px;
  min-width: 350px;
  min-height: 300px;
  max-height: 600px;

  &.dense {
    min-height: 250px;
  }

  & > canvas {
    opacity: inherit;
  }
}

@chart-table-control-chart-data-color: @palette-orange-3;
.chart-table-control {
  & > .bar-chart,
  & > .horizontalBar-chart {
    & > .elements {
      #scout.chart-colors-schemes(@chart-table-control-chart-data-color);
      #scout.chart-stroke-colors-schemes(@chart-table-control-chart-data-color);
      #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @darken: 10, @additional-classes: ~".hover");
      #scout.chart-stroke-colors-schemes(@chart-table-control-chart-data-color, @darken: 10, @additional-classes: ~".hover");
    }

    &.checkable > .elements {
      #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @opacity: 20);
      #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @additional-classes: ~".checked");
      #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @opacity: 35, @additional-classes: ~".hover");
      #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @darken: 10, @additional-classes: ~".hover.checked");
    }
  }

  & > .line-chart {
    #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @opacity: 20);
    #scout.chart-stroke-colors-schemes(@chart-table-control-chart-data-color);
    #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @opacity: 35, @additional-classes: ~".hover");

    #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @additional-classes: ~".legend");
  }

  & > .pie-chart {
    & > .elements {
      #scout.chart-colors-schemes(@chart-table-control-chart-data-color);
      #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @darken: 10, @additional-classes: ~".hover");
    }

    &.checkable > .elements {
      #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @opacity: 70);
      #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @additional-classes: ~".checked");
      #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @opacity: 85, @additional-classes: ~".hover");
      #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @darken: 10, @additional-classes: ~".hover.checked");
    }
  }

  & > .bubble-chart {
    & > .elements {
      #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @opacity: 20);
      #scout.chart-stroke-colors-schemes(@chart-table-control-chart-data-color);
      #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @opacity: 35, @additional-classes: ~".hover");
      #scout.chart-stroke-colors-schemes(@chart-table-control-chart-data-color, @darken: 10, @additional-classes: ~".hover");
    }

    &.checkable > .elements {
      #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @additional-classes: ~".checked");
      #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @darken: 10, @additional-classes: ~".hover.checked");
    }

    #scout.chart-colors-schemes(@chart-table-control-chart-data-color, @additional-classes: ~".legend");
  }
}

/*** Animations ***/

/*** show ***/
.keyframes-show-axis-select() {
  from {
    width: 0;
    border-width: 0;
  }
}

@-webkit-keyframes show-axis-select {
  .keyframes-show-axis-select();
}

@keyframes show-axis-select {
  .keyframes-show-axis-select();
}

/*** hide ***/
.keyframes-hide-axis-select() {
  from {
    width: @chart-table-control-axis-select-width;
    border-width: 1px;
  }
}

@-webkit-keyframes hide-axis-select {
  .keyframes-hide-axis-select();
}

@keyframes hide-axis-select {
  .keyframes-hide-axis-select();
}