@eclipse-scout/chart/src/chart/Chart.less

Eclipse Scout chart

/*
 * Copyright (c) 2010, 2025 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
 */
#scout {
  /* Mixin to use the correct tile background color for the given attribute (use 'fill' or 'stroke') */
  .tile-colors(@attr: fill) {

    .tile & {
        @{attr}: @tile-default-background-color;

      .inverted& {
          @{attr}: @tile-default-inverted-background-color;
      }

      .color-alternative& {
          @{attr}: @tile-alternative-background-color;
      }

      .color-alternative.inverted& {
          @{attr}: @tile-alternative-inverted-background-color;
      }
    }
  }

  /* Internal mixin used to define a single auto color */
  .chart-auto-color-fill(@color, @opacity: 100, @darken: 0) {
    fill: fade(darken(@color, @darken), @opacity);
  }

  .chart-auto-color-stroke(@color, @opacity: 100, @darken: 0) {
    stroke: fade(darken(@color, @darken), @opacity);
  }

  /* Mixin to define .color0 - .color5 fill and stroke colors */
  .chart-auto-colors(@color1, @color2, @color3, @color4, @color5, @color6, @opacity: 100, @darken: 0, @additional-classes: ~"") {
    fill: @color1;

    & .color0@{additional-classes} {
      #scout.chart-auto-color-fill(@color1, @opacity, @darken);
    }

    & .color1@{additional-classes} {
      #scout.chart-auto-color-fill(@color2, @opacity, @darken);
    }

    & .color2@{additional-classes} {
      #scout.chart-auto-color-fill(@color3, @opacity, @darken);
    }

    & .color3@{additional-classes} {
      #scout.chart-auto-color-fill(@color4, @opacity, @darken);
    }

    & .color4@{additional-classes} {
      #scout.chart-auto-color-fill(@color5, @opacity, @darken);
    }

    & .color5@{additional-classes} {
      #scout.chart-auto-color-fill(@color6, @opacity, @darken);
    }
  }

  .chart-auto-stroke-colors(@color1, @color2, @color3, @color4, @color5, @color6, @opacity: 100, @darken: 0, @additional-classes: ~"") {
    & .stroke-color0@{additional-classes} {
      #scout.chart-auto-color-stroke(@color1, @opacity, @darken);
    }

    & .stroke-color1@{additional-classes} {
      #scout.chart-auto-color-stroke(@color2, @opacity, @darken);
    }

    & .stroke-color2@{additional-classes} {
      #scout.chart-auto-color-stroke(@color3, @opacity, @darken);
    }

    & .stroke-color3@{additional-classes} {
      #scout.chart-auto-color-stroke(@color4, @opacity, @darken);
    }

    & .stroke-color4@{additional-classes} {
      #scout.chart-auto-color-stroke(@color5, @opacity, @darken);
    }

    & .stroke-color5@{additional-classes} {
      #scout.chart-auto-color-stroke(@color6, @opacity, @darken);
    }
  }

  /* Mixin to define auto color for different color schemes */
  .chart-auto-colors-schemes(@opacity: 100, @darken: 0, @additional-classes: ~"") {
    #scout.chart-auto-colors(
      @chart-data-color-1,
      @chart-data-color-2,
      @chart-data-color-3,
      @chart-data-color-4,
      @chart-data-color-5,
      @chart-data-color-6,
      @opacity,
      @darken,
      @additional-classes);

    .inverted & {
      #scout.chart-auto-colors(
        @chart-data-color-1-inverted,
        @chart-data-color-2-inverted,
        @chart-data-color-3-inverted,
        @chart-data-color-4-inverted,
        @chart-data-color-5-inverted,
        @chart-data-color-6-inverted,
        @opacity,
        @darken,
        @additional-classes);
    }

    .color-alternative & {
      #scout.chart-auto-colors(
        @chart-data-color-1-alternative,
        @chart-data-color-2-alternative,
        @chart-data-color-3-alternative,
        @chart-data-color-4-alternative,
        @chart-data-color-5-alternative,
        @chart-data-color-6-alternative,
        @opacity,
        @darken,
        @additional-classes);
    }

    .color-alternative.inverted & {
      #scout.chart-auto-colors(
        @chart-data-color-1-alternative-inverted,
        @chart-data-color-2-alternative-inverted,
        @chart-data-color-3-alternative-inverted,
        @chart-data-color-4-alternative-inverted,
        @chart-data-color-5-alternative-inverted,
        @chart-data-color-6-alternative-inverted,
        @opacity,
        @darken,
        @additional-classes);
    }

    .color-rainbow & {
      #scout.chart-auto-colors(
        @chart-data-color-1-rainbow,
        @chart-data-color-2-rainbow,
        @chart-data-color-3-rainbow,
        @chart-data-color-4-rainbow,
        @chart-data-color-5-rainbow,
        @chart-data-color-6-rainbow,
        @opacity,
        @darken,
        @additional-classes);
    }
  }

  .chart-auto-stroke-colors-schemes(@opacity: 100, @darken: 0, @additional-classes: ~"") {
    #scout.chart-auto-stroke-colors(
      @chart-data-color-1,
      @chart-data-color-2,
      @chart-data-color-3,
      @chart-data-color-4,
      @chart-data-color-5,
      @chart-data-color-6,
      @opacity,
      @darken,
      @additional-classes);

    .inverted & {
      #scout.chart-auto-stroke-colors(
        @chart-data-color-1-inverted,
        @chart-data-color-2-inverted,
        @chart-data-color-3-inverted,
        @chart-data-color-4-inverted,
        @chart-data-color-5-inverted,
        @chart-data-color-6-inverted,
        @opacity,
        @darken,
        @additional-classes);
    }

    .color-alternative & {
      #scout.chart-auto-stroke-colors(
        @chart-data-color-1-alternative,
        @chart-data-color-2-alternative,
        @chart-data-color-3-alternative,
        @chart-data-color-4-alternative,
        @chart-data-color-5-alternative,
        @chart-data-color-6-alternative,
        @opacity,
        @darken,
        @additional-classes);
    }

    .color-alternative.inverted & {
      #scout.chart-auto-stroke-colors(
        @chart-data-color-1-alternative-inverted,
        @chart-data-color-2-alternative-inverted,
        @chart-data-color-3-alternative-inverted,
        @chart-data-color-4-alternative-inverted,
        @chart-data-color-5-alternative-inverted,
        @chart-data-color-6-alternative-inverted,
        @opacity,
        @darken,
        @additional-classes);
    }

    .color-rainbow & {
      #scout.chart-auto-stroke-colors(
        @chart-data-color-1-rainbow,
        @chart-data-color-2-rainbow,
        @chart-data-color-3-rainbow,
        @chart-data-color-4-rainbow,
        @chart-data-color-5-rainbow,
        @chart-data-color-6-rainbow,
        @opacity,
        @darken,
        @additional-classes);
    }
  }

  /* Mixin to define different colors for different color schemes */
  .chart-colors-schemes(@color-default:red, @color-inverted:red, @color-alternative:red, @color-alternative-inverted:red, @color-rainbow:red, @opacity: 100, @darken: 0, @additional-classes: ~"") {
    #scout.chart-auto-colors(
      @color-default,
      @color-default,
      @color-default,
      @color-default,
      @color-default,
      @color-default,
      @opacity,
      @darken,
      @additional-classes);

    .inverted & {
      #scout.chart-auto-colors(
        @color-inverted,
        @color-inverted,
        @color-inverted,
        @color-inverted,
        @color-inverted,
        @color-inverted,
        @opacity,
        @darken,
        @additional-classes);
    }

    .color-alternative & {
      #scout.chart-auto-colors(
        @color-alternative,
        @color-alternative,
        @color-alternative,
        @color-alternative,
        @color-alternative,
        @color-alternative,
        @opacity,
        @darken,
        @additional-classes);
    }

    .color-alternative.inverted & {
      #scout.chart-auto-colors(
        @color-alternative-inverted,
        @color-alternative-inverted,
        @color-alternative-inverted,
        @color-alternative-inverted,
        @color-alternative-inverted,
        @color-alternative-inverted,
        @opacity,
        @darken,
        @additional-classes);
    }

    .color-rainbow & {
      #scout.chart-auto-colors(
        @color-rainbow,
        @color-rainbow,
        @color-rainbow,
        @color-rainbow,
        @color-rainbow,
        @color-rainbow,
        @opacity,
        @darken,
        @additional-classes);
    }
  }

  .chart-stroke-colors-schemes(@stroke-color-default:red, @stroke-color-inverted:red, @stroke-color-alternative:red, @stroke-color-alternative-inverted:red, @stroke-color-rainbow:red, @opacity: 100, @darken: 0, @additional-classes: ~"") {
    #scout.chart-auto-stroke-colors(
      @stroke-color-default,
      @stroke-color-default,
      @stroke-color-default,
      @stroke-color-default,
      @stroke-color-default,
      @stroke-color-default,
      @opacity,
      @darken,
      @additional-classes);

    .inverted & {
      #scout.chart-auto-stroke-colors(
        @stroke-color-inverted,
        @stroke-color-inverted,
        @stroke-color-inverted,
        @stroke-color-inverted,
        @stroke-color-inverted,
        @stroke-color-inverted,
        @opacity,
        @darken,
        @additional-classes);
    }

    .color-alternative & {
      #scout.chart-auto-stroke-colors(
        @stroke-color-alternative,
        @stroke-color-alternative,
        @stroke-color-alternative,
        @stroke-color-alternative,
        @stroke-color-alternative,
        @stroke-color-alternative,
        @opacity,
        @darken,
        @additional-classes);
    }

    .color-alternative.inverted & {
      #scout.chart-auto-stroke-colors(
        @stroke-color-alternative-inverted,
        @stroke-color-alternative-inverted,
        @stroke-color-alternative-inverted,
        @stroke-color-alternative-inverted,
        @stroke-color-alternative-inverted,
        @stroke-color-alternative-inverted,
        @opacity,
        @darken,
        @additional-classes);
    }

    .color-rainbow & {
      #scout.chart-auto-stroke-colors(
        @stroke-color-rainbow,
        @stroke-color-rainbow,
        @stroke-color-rainbow,
        @stroke-color-rainbow,
        @stroke-color-rainbow,
        @stroke-color-rainbow,
        @opacity,
        @darken,
        @additional-classes);
    }
  }

  /* Mixin to define label and grid color */
  .chart-label-grid-colors() {
    > .label {
      fill: @chart-legend-label-color;

      .inverted > & {
        fill: @chart-legend-label-inverted-color;
      }
    }

    > .datalabel {
      fill: @chart-data-label-color;
    }

    > .axis-label {
      fill: @chart-axis-label-color;

      .inverted > & {
        fill: @chart-axis-label-color-inverted;
      }
    }

    > .grid,
    > .scale-ticks {
      fill: @chart-axis-line-color;

      .inverted > & {
        fill: @chart-axis-line-color-inverted;
      }
    }
  }
}

/* min-width for charts */
@chart-min-width: 75px;

.tile > .chart-field {
  overflow: hidden;

  /* use padding area for label, legend */

  & > .field.chart {
    overflow: visible;

    & > svg {
      overflow: visible;
    }
  }
}

/* increase space between chart and tile-title if available */
.tile > .form-field:not(.label-hidden) > .field.chart {
  margin-top: 10px;
}

.bar-chart > .elements,
.horizontalBar-chart > .elements,
.chart > canvas,
.chart > svg {
  width: 100%;
  height: 100%;
  position: absolute;
  font-size: @font-size-normal;

  & :focus {
    outline: none;
  }

  #scout.chart-label-grid-colors();
  #scout.chart-auto-colors-schemes();
  #scout.chart-auto-stroke-colors-schemes();
  #scout.chart-auto-colors-schemes(@darken: 10, @additional-classes: ~".hover");
  #scout.chart-auto-stroke-colors-schemes(@darken: 10, @additional-classes: ~".hover");
}

.bar-chart,
.horizontalBar-chart {
  min-width: @chart-min-width;

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

.comboBarLine-chart {
  min-width: @chart-min-width;
}

.pie-chart,
.doughnut-chart {
  min-width: @chart-min-width;

  & > .elements {
    #scout.chart-label-grid-colors();
    #scout.chart-auto-colors-schemes();
    #scout.chart-auto-colors-schemes(@darken: 10, @additional-classes: ~".hover");

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

.polarArea-chart {
  min-width: @chart-min-width;

  & > .elements {
    #scout.chart-label-grid-colors();

    & > .grid,
    & > .scale-ticks {
      fill: darken(@chart-axis-line-color, 15);

      .inverted > & {
        fill: lighten(@chart-axis-line-color-inverted, 25);
      }
    }

    #scout.chart-auto-colors-schemes(@opacity: 70);
    #scout.chart-auto-colors-schemes(@opacity: 85, @additional-classes: ~".hover");

    .checkable& {
      #scout.chart-auto-colors-schemes(@darken: 10, @additional-classes: ~".checked");
      #scout.chart-auto-colors-schemes(@additional-classes: ~".hover.checked");
    }

    #scout.chart-auto-colors-schemes(@additional-classes: ~".legend");
  }
}

.line-chart,
.radar-chart {
  min-width: @chart-min-width;

  & > .elements {
    #scout.chart-label-grid-colors();

    & > .scale-ticks {
      fill: darken(@chart-axis-line-color, 15);

      .inverted > & {
        fill: lighten(@chart-axis-line-color-inverted, 25);
      }
    }

    #scout.chart-auto-colors-schemes(@opacity: 20);
    #scout.chart-auto-stroke-colors-schemes();
    #scout.chart-auto-colors-schemes(@opacity: 60, @additional-classes: ~".hover");

    #scout.chart-auto-colors-schemes(@additional-classes: ~".legend");
  }
}

.bubble-chart,
.scatter-chart {
  min-width: @chart-min-width;

  & > .elements {
    #scout.chart-label-grid-colors();
    #scout.chart-auto-colors-schemes(@opacity: 20);
    #scout.chart-auto-stroke-colors-schemes();
    #scout.chart-auto-colors-schemes(@opacity: 35, @additional-classes: ~".hover");
    #scout.chart-auto-stroke-colors-schemes(@darken: 10, @additional-classes: ~".hover");

    .checkable& {
      #scout.chart-auto-colors-schemes(@additional-classes: ~".checked");
      #scout.chart-auto-colors-schemes(@darken: 10, @additional-classes: ~".hover.checked");
    }

    #scout.chart-auto-colors-schemes(@additional-classes: ~".legend");
  }
}

text.line-label {
  fill: @chart-line-label-color;
  font-size: @font-size-normal;

  .inverted & {
    fill: @chart-axis-label-color-inverted;
  }
}

text.line-label-background {
  font-size: @font-size-normal;
  fill: @chart-line-label-background-color;

  .inverted & {
    fill: @tile-default-inverted-background-color;
  }

  .color-alternative & {
    fill: @chart-alternative-line-label-background-color;
  }

  .color-alternative.inverted & {
    fill: @tile-alternative-inverted-background-color;
  }
}

line.label-line {
  stroke-width: 1px;
  stroke: @chart-line-label-border-color;

  .inverted & {
    stroke: @chart-line-label-inverted-border-color;
  }
}

/* --- Wire labels default ---*/

.line-chart-wire-label {
  fill: @chart-axis-text-color;
  dominant-baseline: auto;
  text-anchor: start;

  &.small {
    font-size: @font-size-normal;
  }
}

.wire-legend-background-box {
  fill: @background-color;
  #scout.tile-colors(fill);
  stroke-width: 0;
}

/* --- FulfillmentChart --- */

path.fulfillment-chart {
  stroke-width: 0;

  .clickable & {
    cursor: pointer;
  }

  &.auto-color {
    fill: @chart-data-color;

    .clickable &:hover {
      fill: @chart-data-hover-color;
    }

    &.selected {
      fill: @chart-data-selected-color;
    }
  }

  .color-alternative &.auto-color {
    fill: @chart-data-color-alternative;

    .clickable &:hover {
      fill: @chart-data-hover-color-alternative;
    }

    &.selected {
      fill: @chart-data-selected-color-alternative;
    }
  }

  .inverted & {
    &.auto-color {
      fill: @chart-data-color-inverted;

      .clickable&:hover {
        fill: @chart-data-hover-color-inverted;
      }

      &.selected {
        fill: @chart-data-selected-color-inverted;
      }
    }

    .color-alternative&.auto-color {
      fill: @chart-data-color-alternative-inverted;

      .clickable&:hover {
        fill: @chart-data-hover-color-alternative-inverted;
      }

      &.selected {
        fill: @chart-data-selected-color-alternative-inverted;
      }
    }
  }
}

path.fulfillment-chart-inner-circle {
  fill: @fufillment-chart-inner-circle-color;
}

text.fulfillment-chart-label {
  fill: @chart-axis-text-color;
  text-anchor: middle;

  .inverted & {
    fill: @fulfillment-chart-inverted-label-color;
  }
}

/* --- SpeedoChart ---*/

.speedo-chart-svg {
  .clickable & {
    cursor: pointer;
  }
}

text.speedo-chart-label {
  fill: @chart-axis-text-color;
  text-anchor: middle;
}

path.speedo-chart-arc, path.pointer {

  &.dark-green {
    stroke: @speedo-chart-dark-green;
  }

  &.light-green {
    stroke: @speedo-chart-green;
  }

  &.yellow {
    stroke: @speedo-chart-yellow;
  }

  &.red {
    stroke: @speedo-chart-red;
  }

  .color-alternative & {

    &.dark-green {
      stroke: @speedo-chart-dark-green-alternative;
    }

    &.light-green {
      stroke: @speedo-chart-green-alternative;
    }

    &.yellow {
      stroke: @speedo-chart-yellow-alternative;
    }

    &.red {
      stroke: @speedo-chart-red-alternative;
    }
  }

  .inverted & {

    &.dark-green {
      stroke: @speedo-chart-dark-green-inverted;
    }

    &.light-green {
      stroke: @speedo-chart-green-inverted;
    }

    &.yellow {
      stroke: @speedo-chart-yellow-inverted;
    }

    &.red {
      stroke: @speedo-chart-red-inverted;
    }

    .color-alternative& {

      &.dark-green {
        stroke: @speedo-chart-dark-green-alternative-inverted;
      }

      &.light-green {
        stroke: @speedo-chart-green-alternative-inverted;
      }

      &.yellow {
        stroke: @speedo-chart-yellow-alternative-inverted;
      }

      &.red {
        stroke: @speedo-chart-red-alternative-inverted;
      }
    }
  }
}

/* --- Salesfunnel --- */

line.label-separator {
  stroke: @palette-gray-7;

  .inverted & {
    stroke: @palette-white;
  }
}

polygon.salesfunnel-chart-bar {
  #scout.chart-auto-colors-schemes();
  stroke-width: 1px;

  .clickable & {
    cursor: pointer;
  }

  /* Override standard colors set for auto-colors in SVG (see above) */

  .inverted &.auto-color:not(:hover),
  .inverted.color-alternative &.auto-color:not(:hover) {
    fill: @palette-white;
  }

  &.auto-color:hover {
    fill: @chart-data-hover-color;
  }

  .inverted &.auto-color:hover {
    fill: @chart-data-white-hover-color;
  }

  .color-alternative &.auto-color:hover {
    fill: @chart-data-hover-color-alternative;
  }

  .color-alternative.inverted &.auto-color:hover {
    fill: @chart-data-white-hover-color;
  }

  .color-rainbow &.auto-color:hover {
    fill: @chart-data-hover-color-rainbow;
  }
}

text.salesfunnel-bar-label {
  text-anchor: middle;
  dominant-baseline: central;
  font-size: @font-size-normal;
  fill: @salesfunnel-bar-label-color;
  pointer-events: none;

  .inverted & {
    fill: @salesfunnel-inverted-bar-label-color;
  }

  .color-alternative & {
    fill: @salesfunnel-alternative-bar-label-color;
  }

  .color-alternative.inverted & {
    fill: @salesfunnel-alternative-inverted-bar-label-color;
  }
}

text.salesfunnel-label {
  fill: @chart-axis-text-color;

  text-anchor: end;
  dominant-baseline: central;
  font-size: @font-size-normal;

  .inverted & {
    fill: @palette-white;
  }
}

text.salesfunnel-conversionrate-label {
  fill: @chart-axis-text-color;
  text-anchor: start;
  dominant-baseline: central;
  font-size: @font-size-normal;

  .inverted & {
    fill: @palette-white;
  }
}

/* --- Venn --- */

circle.venn-circle {
  opacity: 0.5;

  .clickable & {
    cursor: pointer;
  }

  &.auto-color {
    fill: @chart-data-color;

    .inverted & {
      fill: @chart-data-color-inverted;
    }

    .color-alternative & {
      fill: @chart-data-color-alternative;
    }

    .color-alternative.inverted & {
      fill: @chart-data-color-alternative-inverted;
    }
  }
}

text.venn-label {
  fill: @palette-white;
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: @font-size-normal;
  pointer-events: none;
}

line.venn-axis-white {
  stroke: @palette-white;
}

text.venn-legend {
  font-size: @font-size-normal;
  dominant-baseline: auto;
  text-anchor: start;
}

/*** chart tooltip ***/
.tooltip.chart-tooltip {
  max-width: 400px;

  --chart-tooltip-font-family: @font-default-family;
  --chart-tooltip-label-width: 70px;

  & > .tooltip-content > .attribute {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    padding-top: 2px;
    padding-bottom: 2px;

    &:first-child {
      padding-top: 0;
    }

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

    & > .color {
      height: 10px;
      width: 10px;
      border-radius: 50%;
      margin-right: 5px;
    }

    & > label {
      width: var(--chart-tooltip-label-width);
      overflow: hidden;
      text-overflow: ellipsis;
      padding-right: 10px;
      white-space: nowrap;
      font-size: @field-label-font-size;
      padding-top: @font-size-normal - @field-label-font-size;

      &:first-child {
        width: calc(var(--chart-tooltip-label-width) + 15px); // compensate missing color bubble

        &:last-child {
          width: 100%;
          padding-right: 0;
          font-size: @font-size-normal;
          font-family: var(--chart-tooltip-font-family);
        }
      }
    }

    & > .value {
      flex-grow: 1;
      max-width: calc(100% - 15px - var(--chart-tooltip-label-width));
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      text-align: right;
      font-size: @font-size-normal;
      font-weight: @font-weight-normal;
      font-family: var(--chart-tooltip-font-family);
    }

    &.title > .value {
      text-align: left;
    }
  }

  & > .tooltip-content > table > tbody > .attribute {
    padding-top: 2px;
    padding-bottom: 2px;

    &:first-child {
      padding-top: 0;
    }

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

    & .color-cell {
      & > .color {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        margin-right: 5px;
      }
    }

    & > .label {
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-right: 10px;
      white-space: nowrap;
      font-size: @field-label-font-size;
      padding-top: @font-size-normal - @field-label-font-size;
    }

    & > .value {
      white-space: nowrap;
      text-align: right;
      font-size: @font-size-normal;
      font-weight: @font-weight-normal;
      font-family: var(--chart-tooltip-font-family);
      padding-right: 10px;

      &:last-child {
        padding-right: 0;
      }
    }

    &.title > .value {
      text-align: left;
      max-width: 120px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}