@c8y/style/styles/_c8y-data-explorer.less

Styles for Cumulocity IoT applications

.checkBG(@check) when not (@check=inherit) {
  padding: @margin-base;
  .form-control:not(:focus),
  .c8y-select-wrapper {
    background-color: transparent;
    color: inherit;
  }
}

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

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% - 95px);
  max-width: 99.5%;
}

.top-chart-bar {
  justify-content: space-between;
  margin: 2px 0 0;
  position: relative;
  z-index: 2;
  align-items: center;
  + hr {
    margin: 9px calc(@component-padding * -1);
    .no-card-context &{
      margin-left: 0;
      margin-right: 0;
    }
    + .chart-container {
      top: 100px !important;
      @media (min-width: @screen-sm-min) {
        top: 75px !important;
      }
      @media (min-width: @screen-md-min) {
        top: 30px !important;
      }
    }
  }
  .measurement-icon-bar-wrapper {
    flex: 1 0 80px;
  }
  c8y-item-selector {
    display: none;
    max-width: 170px;
    @media (min-width: @screen-md-min) {
      max-width: 240px;
    }
    .c8y-child-assets-selector {
      > .btn {
        background-size: @font-size-small;
        .input-sm();
        padding-right: 24px !important;
        background-position: right 6px top 6px;
      }
    }
  }
  &.has-data-selector {
    c8y-item-selector {
      display: block;
    }
  }
}

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

// inside dashboard widgets
.card-dashboard {
  .top-chart-bar {
    margin: 0;
  }
  c8y-measurements-icon-bar {
    width: 100%;
  }
  .top-chart-bar {
    padding-left: @component-padding;
    padding-right: @component-padding;
    + hr {
      display: none;
    }
    c8y-item-selector {
      max-width: 170px;
    }
  }
}

.has-aggregation .measurement-icon-bar .c8y-realtime {
  display: none;
}

.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: 10px;
      right: @component-padding;
    }
    .top-chart-bar + hr {
      display: none;
    }
  }
}

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

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

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

.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: 12px;
  margin-top: 3px;
  line-height: 10px;
}

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

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

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

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

.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: 48px;
  right: 11px;
  bottom: 3px;
}

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

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

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

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

.meausurements2 .timeField table {
  margin-top: -24px;
}
.meausurements2 .timeField .btn {
  height: 24px;
}

.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: 5px;
  left: 5px;
  z-index: 100;
  min-width: 404px;
}

.meausurements2 .top-controls {
  position: relative;
  z-index: 100;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .meausurements2 .measurements-date-from,
  .meausurements2 .measurements-date-to,
  .meausurements2 .top-controls {
    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;
  }

  .meausurements2 .top-controls {
    top: 0;
    right: -35px;
  }
}