kmh-goal-charts

Project setup

npm i @kmhgmbh/kmh-goal-chart

Integration

import Vue from 'vue';
import App from './App.vue';
import KmhGoalChart from '@kmhgmbh/kmh-goal-chart';

Vue.use(KmhGoalChart);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

Usage

<goal :chart="goalViews[0]" :prepareChart="prepareChart" />

Example

<template>
  <div id="app">
    <div class="md-layout md-gutter">
      <div class="md-layout-item md-size-15">
        <md-field>
          <goal :chart="goalViews[0]" :prepareChart="prepareChart" />
        </md-field>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    pieOptions,
    stackedOptions,
    horizontalOptions,
    lineOptions,
  } from './assets/chart-options';

  const chartData = {
    goal: [
      {
        data: [90],
        backgroundColor: 'rgba(0, 230, 0, 1)',
      },
    ],
    history: [
      {
        data: [0, 1, 2, 3, 2, 5, 6, 2, 8, 9],
        labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      },
    ],
  };

  export default {
    name: 'app',
    data() {
      return {
        goalViews: [
          {
            title: 'Anschlussaufträge',
            labels: ['ZE'],
            data: {
              props: {
                value: 80,
                max: 110,
                text: 'Beauftragte Anschlüsse:',
              },
              line: {
                text: 'Aufträge im Zeitverlauf:',
                labels: chartData.history[0].labels,
                dataset: [
                  {
                    fill: true,
                    data: chartData.history[0].data,
                  },
                ],
                options: lineOptions,
              },
              dataset: chartData.goal,
            },
            options: null,
          },
        ],
      };
    },
    methods: {
      prepareChart() {
        this.goalViews.forEach(elm => {
          elm.options = JSON.parse(JSON.stringify(horizontalOptions));
          elm.options.plugins = {
            datalabels: {
              color: 'black',
              formatter: value => {
                return value + '%';
              },
            },
          };
          const val = elm.data.dataset[0];
          if (val.data[0] > 100) {
            elm.options.scales.xAxes[0].ticks.max = val.data[0];
          } else if (val.data[0] < 100) {
            if (val.data[0] < 80 && val.data[0] >= 50) {
              elm.data.dataset[0].backgroundColor = 'rgba(255, 150, 50, 1)';
            } else if (val.data[0] < 50) {
              elm.data.dataset[0].backgroundColor = 'rgba(255, 50, 50, 1)';
            }
            elm.options.scales.xAxes[0].ticks.max = 100;
          }
        });
      },
    },
    mounted() {
      this.prepareChart();
    },
  };
</script>

<style>
  #app {
    width: 100%;
    padding: 0 20px;
    font-family: 'Roboto';
    color: #393333;
  }
</style>