Merge pull request #419 from vlad-markin/feature/charts

Feature/charts

plugins.json

@@ -1,6 +1,7 @@
 {
     "inbuilt": [
         "plugins/html",
-        "plugins/markaper"
+        "plugins/markaper",
+        "plugins/charts"
     ]
-}
+}

plugins/charts/components/ChartMixin.js

@@ -0,0 +1,77 @@
+export const defaultOptions = {
+  responsive: true,
+  maintainAspectRatio: false
+};
+
+export default {
+  props: {
+    profile: {
+      type: Object,
+      required: true
+    },
+    pullData: {
+      type: Function,
+      required: true
+    },
+    datasetIdKey: {
+      type: String,
+      default: 'label'
+    },
+    cssClasses: {
+      default: '',
+      type: String
+    },
+    styles: {
+      type: Object,
+      default: () => {}
+    },
+    plugins: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      refresher: null,
+      width: this.profile.width || this.profile.size || 400,
+      height: this.profile.height || this.profile.size || 400,
+      chartData: {
+        labels: [],
+        datasets: []
+      },
+      chartOptions: { ...defaultOptions, ...this.profile.options }
+    };
+  },
+  watch: {
+    profile() {
+      this.onRefresh();
+    }
+  },
+  mounted() {
+    this.onRefresh();
+  },
+  methods: {
+    onRefresh() {
+      if (this.refresher) clearTimeout(this.refresher);
+      this.refresher = setTimeout(this.doRefresh, 50);
+    },
+    doRefresh() {
+      if (this.profile) {
+
+        this.pullData().then((result) => {
+          try {
+            this.chartData.labels = [...(result?.labels || []), ...(this.profile.labels || [])];
+            this.chartOptions = { ...defaultOptions, ...result?.options, ...this.profile.options };
+
+            this.chartData.datasets = result?.datasets?.map((dataset) =>
+              dataset.color ? { ...this.dataSetWithDefaultOptions(dataset), ...dataset } : dataset
+            ) || [];
+          } catch (e) {
+            this.error = e;
+          }
+        }).catch((e) => this.error = e);
+
+      }
+    }
+  }
+};

plugins/charts/components/bar/BarChart.vue

@@ -0,0 +1,52 @@
+<template>
+  <bar
+    v-bind:chart-options="chartOptions"
+    v-bind:chart-data="chartData"
+    v-bind:chart-id="chartId"
+    v-bind:dataset-id-key="datasetIdKey"
+    v-bind:plugins="plugins"
+    v-bind:css-classes="cssClasses"
+    v-bind:styles="styles"
+    v-bind:width="width"
+    v-bind:height="height" />
+</template>
+
+<script>
+  import { Bar } from 'vue-chartjs/legacy';
+
+  import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    BarElement,
+    CategoryScale,
+    LinearScale
+  } from 'chart.js';
+  import chartMixin from '../ChartMixin';
+
+  ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);
+
+  export default {
+    name: 'BarChart',
+    components: {
+      Bar
+    },
+    mixins: [chartMixin],
+    props: {
+      chartId: {
+        type: String,
+        default: 'bar-chart'
+      }
+    },
+    methods: {
+      dataSetWithDefaultOptions(dataset) {
+        return {
+          label: dataset.label,
+          backgroundColor: dataset.color,
+          data: dataset.data
+        };
+      }
+    }
+  };
+</script>

plugins/charts/components/bubble/BubbleChart.vue

@@ -0,0 +1,52 @@
+<template>
+  <bubble
+    v-bind:chart-options="chartOptions"
+    v-bind:chart-data="chartData"
+    v-bind:chart-id="chartId"
+    v-bind:dataset-id-key="datasetIdKey"
+    v-bind:plugins="plugins"
+    v-bind:css-classes="cssClasses"
+    v-bind:styles="styles"
+    v-bind:width="width"
+    v-bind:height="height" />
+</template>
+
+<script>
+  import { Bubble } from 'vue-chartjs/legacy';
+
+  import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    PointElement,
+    LinearScale
+  } from 'chart.js';
+  import chartMixin from '../ChartMixin';
+
+
+  ChartJS.register(Title, Tooltip, Legend, PointElement, LinearScale);
+
+  export default {
+    name: 'BubbleChart',
+    components: {
+      Bubble
+    },
+    mixins: [chartMixin],
+    props: {
+      chartId: {
+        type: String,
+        default: 'bubble-chart'
+      }
+    },
+    methods: {
+      dataSetWithDefaultOptions(dataset) {
+        return {
+          label: dataset.label,
+          backgroundColor: dataset.color,
+          data: dataset.data
+        };
+      }
+    }
+  };
+</script>

plugins/charts/components/doughnut/DoughnutChart.vue

@@ -0,0 +1,50 @@
+<template>
+  <doughnut
+    v-bind:chart-options="chartOptions"
+    v-bind:chart-data="chartData"
+    v-bind:chart-id="chartId"
+    v-bind:dataset-id-key="datasetIdKey"
+    v-bind:plugins="plugins"
+    v-bind:css-classes="cssClasses"
+    v-bind:styles="styles"
+    v-bind:width="width"
+    v-bind:height="height" />
+</template>
+
+<script>
+  import { Doughnut } from 'vue-chartjs/legacy';
+
+  import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    ArcElement,
+    CategoryScale
+  } from 'chart.js';
+  import chartMixin from '../ChartMixin';
+
+  ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale);
+
+  export default {
+    name: 'DoughnutChart',
+    components: {
+      Doughnut
+    },
+    mixins: [chartMixin],
+    props: {
+      chartId: {
+        type: String,
+        default: 'doughnut-chart'
+      }
+    },
+    methods: {
+      dataSetWithDefaultOptions(dataset) {
+        return {
+          backgroundColor: dataset.color,
+          data: dataset.data
+        };
+      }
+    }
+  };
+</script>

plugins/charts/components/line/LineChart.vue

@@ -0,0 +1,62 @@
+<template>
+  <line-chart-generator
+    v-bind:chart-options="chartOptions"
+    v-bind:chart-data="chartData"
+    v-bind:chart-id="chartId"
+    v-bind:dataset-id-key="datasetIdKey"
+    v-bind:plugins="plugins"
+    v-bind:css-classes="cssClasses"
+    v-bind:styles="styles"
+    v-bind:width="width"
+    v-bind:height="height" />
+</template>
+
+<script>
+  import { Line as LineChartGenerator } from 'vue-chartjs/legacy';
+
+  import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    LineElement,
+    LinearScale,
+    CategoryScale,
+    PointElement
+  } from 'chart.js';
+  import chartMixin from '../ChartMixin';
+
+  ChartJS.register(
+    Title,
+    Tooltip,
+    Legend,
+    LineElement,
+    LinearScale,
+    CategoryScale,
+    PointElement
+  );
+
+  export default {
+    name: 'LineChart',
+    components: {
+      LineChartGenerator
+    },
+    mixins: [chartMixin],
+    props: {
+      chartId: {
+        type: String,
+        default: 'line-chart'
+      }
+    },
+    methods: {
+      dataSetWithDefaultOptions(dataset) {
+        return {
+          label: dataset.label,
+          borderColor: dataset.color,
+          backgroundColor: dataset.color,
+          data: dataset.data
+        };
+      }
+    }
+  };
+</script>

plugins/charts/components/pie/PieChart.vue

@@ -0,0 +1,50 @@
+<template>
+  <pie
+    v-bind:chart-options="chartOptions"
+    v-bind:chart-data="chartData"
+    v-bind:chart-id="chartId"
+    v-bind:dataset-id-key="datasetIdKey"
+    v-bind:plugins="plugins"
+    v-bind:css-classes="cssClasses"
+    v-bind:styles="styles"
+    v-bind:width="width"
+    v-bind:height="height" />
+</template>
+
+<script>
+  import { Pie } from 'vue-chartjs/legacy';
+
+  import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    ArcElement,
+    CategoryScale
+  } from 'chart.js';
+  import chartMixin from '../ChartMixin';
+
+  ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale);
+
+  export default {
+    name: 'PieChart',
+    components: {
+      Pie
+    },
+    mixins: [chartMixin],
+    props: {
+      chartId: {
+        type: String,
+        default: 'pie-chart'
+      }
+    },
+    methods: {
+      dataSetWithDefaultOptions(dataset) {
+        return {
+          backgroundColor: dataset.color,
+          data: dataset.data
+        };
+      }
+    }
+  };
+</script>