ACV Line Chart

Displays values in a line

Basic usage

Data is loading...

Source code

<script>
  import networkOneData from '../__data__/data.mock.network.one.json';
  import AcvLineChart from '@/widgets/line-chart/lineChart.vue';

  export default {
    components: { AcvLineChart },
    data() {
      return {
        networkOneData
      };
    },
    methods: {
      onTimelineClick(date, event) {
        console.log('timeline clicked');
        console.log(date);
        console.log(event);
      },
      onLegendClick(index, event) {
        console.log('legend clicked');
        console.log(index);
        console.log(event);
      }
    }
  };
</script>

<template>
  <div class="qa-line-chart-basic">
    <AcvLineChart
      :data="networkOneData"
      tooltip-time-format="dd MMM yyy, HH:MM"
      @timeline-click="onTimelineClick"
      @legend-click="onLegendClick"
    />
  </div>
</template>

Anomalies

CPU historical data

Data is loading...

Source code

<script>
  import anomaliesData from '../__data__/data.mock.anomalies.json';
  import AcvButton from '@/components/button/button.vue';
  import AcvDropdown from '@/components/dropdown/dropdown.vue';
  import AcvDropdownItem from '@/components/dropdown/dropdownItem.vue';
  import AcvDropdownMenu from '@/components/dropdown/dropdownMenu.vue';
  import AcvLineChart from '@/widgets/line-chart/lineChart.vue';
  import AcvWidgetWrapper from '@/widgets/widget-wrapper/widgetWrapper.vue';

  export default {
    components: {
      AcvWidgetWrapper,
      AcvButton,
      AcvDropdown,
      AcvDropdownMenu,
      AcvDropdownItem,
      AcvLineChart
    },
    data() {
      return {
        selectedTimeUnit: 'day',
        timeUnitOptions: [
          {
            value: 'hour',
            label: 'per hour'
          },
          {
            value: 'day',
            label: 'per day'
          },
          {
            value: 'month',
            label: 'per month'
          },
          {
            value: 'year',
            label: 'per year'
          }
        ],
        data: {
          data: [
            {
              name: 'CPU',
              points: anomaliesData.points.map(point => ({
                ...point,
                x: new Date(point.x)
              }))
            }
          ]
        }
      };
    },
    methods: {
      handleChangeData() {
        if (!this.isChangedData) {
          this.dataTwo.sets[0].points = this.alterPoints;
        }
        else {
          this.dataTwo.sets[0].points = this.origPoints;
        }
        console.log(this.dataTwo.sets[0].points);
        this.isChangedData = !this.isChangedData;
      },
      handleDropdownChange(_, instance) {
        const index = instance.$parent.$children.findIndex(
          $children => $children._uid === instance._uid
        );
        this.selectedTimeUnit = this.timeUnitOptions[index].value;
      },
      onClose() {
        console.log('Alert is closed');
      }
    }
  };
</script>

<template>
  <AcvWidgetWrapper
    title="CPU historical data"
    :style="{ width: '700px' }"
  >
    <template #header-aside>
      <AcvDropdown
        placement="bottom-start"
        @command="handleDropdownChange"
      >
        <AcvButton
          type="ghost"
          right-icon
          icon="i-chevron-down--16"
        >
          {{ selectedTimeUnitLabel }}
        </AcvButton>
        <template #dropdown>
          <AcvDropdownMenu>
            <AcvDropdownItem
              v-for="option in timeUnitOptions"
              :key="option.value"
            >
              {{ option.label }}
            </AcvDropdownItem>
          </AcvDropdownMenu>
        </template>
      </AcvDropdown>
    </template>
    <AcvLineChart
      :data="data"
      :time-unit="selectedTimeUnit"
      variable-threshold
    />
  </AcvWidgetWrapper>
</template>

Corner Cases

Chart update data

Data is loading...

with percent scale

Float values

Props

Prop name	Description	Type	Values	Default
colors		array	-
data		object	-	null
dataPointOnHover		boolean	-	false
height		string	-	'200px'
legend		boolean	-	true
precision		number	-	0
stepped		boolean	-	false
timeUnit		string	second, minute, hour, day, month, year	'hour'
tooltip		boolean	-	true
tooltipTimeFormat		string	-	'dd MMM yyyy hh:mm:ss'
variableThreshold		boolean	-	false
width		string	-	''
xAxis		boolean	-	true
xGrid		boolean	-	true
yAxis		boolean	-	true
yAxisTicksUpperLimit		number	-	5
yGrid		boolean	-	true
yPercent		boolean	-	false
showDataTypeUnit		boolean	-	false

Events

Event name	Properties	Description
timelineClick	<anonymous1> undefined - undefined

Slots

Name	Description	Bindings
legend
tooltipbody