# Addons

# epic-spinners

Wrapper for https://github.com/epicmaxco/epic-spinners. Places the choice of spinner automatically in the middle of the DashItem. Intended to be used when your DashItem components require data to be loaded. (Loading Spinners)

Note: Also includes a Random spinner object which will choose a Spinner at runtime.


<template>
  <div id="app">
    <Dashboard :id="'dashExample'">
      <DashLayout
        v-for="layout in layouts"
        :key="layout.breakpoint"
        v-bind="layout"
      >
        <DashItem
          v-for="item in layout.items"
          :key="item.id"
          v-bind.sync="item"
        >
          <randomSpinner
            :animation-duration="1000"
            :size="60"
            :color="'#ff1d5e'"
          ></randomSpinner>
          <template v-slot:resizeBottomRight> _| </template>
        </DashItem>
      </DashLayout>
    </Dashboard>
  </div>
</template>

<script>
import { Dashboard, DashLayout, DashItem } from "vue-responsive-dash";
import { RandomSpinner } from "@vue-responsive-dash/epic-spinners";

export default {
  name: "App",
  components: {
    Dashboard,
    DashLayout,
    DashItem,
    RandomSpinner
  },
  data() {
    return {
      layouts: ...
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

# Chartjs

Implements vue-chartjs https://vue-chartjs.org/. This wrapper automatically scales the chart to fit DashItem.

See vue-chartjs for usage information: https://vue-chartjs.org/guide/

# eCharts

Implements vue-echarts https://ecomfe.github.io/vue-echarts/demo/. This wrapper automatically scales the charts to fit each DashItem.

See vue-echarts for usage information: https://github.com/ecomfe/vue-echarts

# FusionCharts

Wrapper for fusioncharts https://github.com/fusioncharts/vue-fusioncharts. This wrapper automatically scales the chart to fit DashItem.

See vue-fusioncharts for usage information: https://fusioncharts.github.io/vue-fusioncharts/