@c8y/style/styles/components/data-display-and-visualization/_c8y-data-explorer.less

Styles for Cumulocity IoT applications

@import "../../mixins/_shadows-helper.less";


/**
 * c8y data explorer - Component styles
 *
 * Note: Uses @size-* tokens for spacing where applicable.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions: Fixed sizes for component layout
 * - Off-grid spacing: Component-specific positioning
 * - Border widths (1px, 2px, 3px): Standard borders
 * - Font-sizes: Typography
 * - Percentages: Layout
 */
// Note: LESS mixin with guard removed - was never used
// checkBG(@check) when not (@check=inherit) {
//   padding: @size-base;
//   .form-control:not(:focus),
//   .c8y-select-wrapper {
//     background-color: transparent;
//     color: inherit;
//   }
// }

.c8y-data-explorer {
  background-color: inherit;
  color: inherit;
  margin-top: @size-10;
}

c8y-chart {
  z-index: 10;
}

.chart-container,
.c8y-timelines-chart {
  fill: currentColor;
}

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

.card-dashboard .chart-container{
  max-height: calc(100% - 46px);
  max-width: 99.5%;
  min-height: unset;
}

.card-dashboard {
  c8y-datapoints-graph-widget-view{
    flex-grow: 1;
  }
  &:has(c8y-aggregation-picker),
  &:has(c8y-auto-refresh-control),
  &:has(c8y-date-time-context-picker) {
    .chart-container {
      max-height: calc(100% - 80px);
    }
  }
}

// Removed unused control utility class - verified 0 usages: .top-chart-bar

.c8yGraphFill {
  min-height: 540px;
  @media screen and (min-width: @screen-lg-min) {
    min-height: unset;
  }
}

// inside dashboard widgets
.card-dashboard {
  // Removed unused control utility class - verified 0 usages: .top-chart-bar
  c8y-measurements-icon-bar {
    width: 100%;
  }
  // Removed unused control utility class - verified 0 usages: .top-chart-bar
}

// Removed unused utility usage: .has-aggregation .measurement-icon-bar .c8y-realtime

.c8y-timelines-chart,
.chart-container {
  svg {
    padding: 0;
  }
  .strictValue {
    rect {
      fill: @tooltip-background-default;
      + text {
        fill: @tooltip-color-default;
      }
    }
  }
}

//.fragment-chart
.measurements-tab .fragment-chart {
  .realtime-form {
    text-align: right;
  }
}

@media (min-width: @screen-sm-min) {
  .measurements-tab .fragment-chart {
    .realtime-form {
      position: absolute;
      top: @size-10;
      right: @component-padding;
    }
    // Removed unused control utility class - verified 0 usages: .top-chart-bar
  }
}

.tab-pane {
  .realtime-form {
    float: right;
  }
}

.c8y-chart-hover-box {
  position: absolute;
  display: inline-block;
  background-color: @popover-background-default;
  padding: @size-10;
  top: 0;
  z-index: 1100;
  pointer-events: none;
  .boxShadowHelper(md, right);
}

.c8y-chart-hover-box {
  .dlt-c8y-icon-circle {
    font-size: @size-10;
  }
}

.c8y-chart-hover-box .label {
  padding: 0 5px 0 0;
  color: @popover-label-color;
  margin: 0;
  font-weight: bold;
  font-size: 100%;
}

.c8y-chart-hover-box .value {
  color: @popover-color-default;
}

.c8y-chart-hover-box .value-holder {
  font-size: @font-size-small;
  margin-top: 3px;
  line-height: @size-10;
}

.c8y-chart-hover-box .time-holder {
  color: @component-color-text-muted;
  font-size: @size-10;
}

.c8y-chart .clock {
  color: @component-form-legend-color;
  font-size: @font-size-small;
}

.c8y-chart .axis {
  line,
  path {
    stroke: @component-color-default;
  }
}

.truncated,
.chart-help,
.chart-loading {
  position: absolute;
  bottom: 3px;
  left: 15px;
  right: 7px;
  font-size: @font-size-small;
}

.chart-loading {
  left: 17px;
  bottom: 5px;
}

.chart-help,
.chart-loading {
  color: @component-color-default;
}

.chart-help,
.truncated {
  left: 56px;
}

.chart-load-more{
  position: absolute;
  left: @size-16;
  right: @size-16;
  bottom: 3px;
  z-index: 20;
}

.meausurements2 c8y-measurements-icon-bar {
  display: block;
  padding-top: 5px;
  color: @component-color-default;
}

.meausurements2 .measurement-icon-bar {
  padding-left: @size-10;
  position: relative;
  z-index: 120;
}

.meausurements2 .measurement-icon {
  padding: 3px;
  margin: 1px;
  position: static;
  font-size: @font-size-small;
  background: none;
}

.meausurements2 .timeField input {
  height: 30px;
  padding: 5px 10px;
  font-size: @font-size-small;
  line-height: 1.5;
  border-radius: 3px;
}

.meausurements2 .timeField table {
  margin-top: calc(-1 * @size-24);
}
.meausurements2 .timeField .btn {
  height: @size-24;
}

.meausurements2 .timeField .btn-link {
  color: @component-color-actions !important;
}

.meausurements2 .timeField tr:hover td {
  background: transparent;
}

.meausurements2 .timeField tr:nth-child(3) a {
  position: relative;
  top: -3px;
}

.meausurements2 .measurements-time-control {
  position: absolute;
  bottom: 1px;
  right: @size-5;
  left: 5px;
  z-index: 100;
  min-width: 404px;
}

// Removed unused control utility class - verified 0 usages: .top-controls

@media (max-width: 768px) {
  .meausurements2 .measurements-date-from,
  .meausurements2 .measurements-date-to {
    position: absolute;
    transform: scale(0.8);
  }

  .meausurements2 .measurements-date-from,
  .meausurements2 .measurements-date-to {
    bottom: 0;
  }

  .meausurements2 .measurements-date-from {
    left: -35px;
  }

  .meausurements2 .measurements-date-to {
    right: -35px;
  }

  // Removed unused control utility class - verified 0 usages: .top-controls
}

.e-charts--aggregated-datapoint{
  position: absolute;
  right: 17px;
  bottom: 3px;
  display: flex;
  align-items: center;
}