@c8y/style/styles/dashboard/_info-gauge.less

Styles for Cumulocity IoT applications

/**
 * Info Gauge - SVG-based label-value-unit gauge widget
 *
 * Note: Uses @size-24 for padding and @size-10 for font-size. Uses color tokens.
 *
 * Intentionally hardcoded values:
 * - SVG stroke-widths (24px, 22px, 7): Gauge appearance
 * - SVG stroke-dasharray/-offset values (503, -503px, -125.75px): Gauge drawing calculations
 * - Font-sizes (26px, 14px): Component-specific typography
 * - Letter-spacing (-1px): Typography fine-tuning
 * - Transition duration (0.25s): Animation timing
 * - Min-height (280px): Chart container height
 * - Container query breakpoint (150px): Responsive layout
 * - Container query units (40cqw, 100cqh): Container-relative sizing
 * - SVG em-based dasharray (0.03em, 5): Stroke pattern
 */

.label-value-unit-gauge {
  display: block;
  padding: 0 @size-24;
  min-height: 100%;
  .gauge-legend {
    width: 100%;
    h3 {
      margin: 0;
    }
  }
  circle.empty {
    stroke: transparent;
    stroke-width: 24px;
    fill: none;
  }
  .center-value,
  .center-label,
  .center-unit,
  .center-date-time {
    text-anchor: middle;
    fill: @component-color-default;
    color: @component-color-default;
  }
  .center-value {
    letter-spacing: -1px;
    font-size: 26px;
    font-weight: bold;
  }
  .center-label {
    font-size: 14px;
  }

  .center-unit,
  .center-date-time {
    font-size: @size-10;
    fill: @text-muted;
    color: @text-muted;
  }
  .gauge-svg svg {
    path.track,
    path.track-value {
      display: block;
      stroke-linejoin: miter;
      stroke-linecap: miter;
      fill: none;
      stroke-width: 22px;
      stroke-dasharray: 503;
      stroke-dashoffset: -503px;
    }
    path.track {
      stroke-dashoffset: -125.75px;
      stroke: @component-background-active;
    }
    path.track-value {
      transition: stroke-dashoffset 0.25s ease;
    }
    path.track-scale {
      stroke: @component-background-active;
      stroke-width: 7;
      fill: none;
      stroke-dasharray: 0.03em, 5;
    }
  }
  #mask {
    fill: @component-background-default;
  }
}

.chart-container {
  min-height: 280px;
}



@container (min-width: 150px) {
  .label-value-unit-gauge {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    .gauge-legend {
      width: 40cqw;
    }
  }
  .gauge-svg {
    height: 100cqh;
    width: 100%;
  }
}