somewhere

2023-08-17 13:05:51 +03:30
parent 30c7eb0e7b
commit 53843207cc
429 changed files with 117489 additions and 1 deletions
@@ -0,0 +1,145 @@
+/* eslint-disable vue/require-default-prop */
+
+<template>
+  <CChartLine :datasets="computedDatasets" :options="computedOptions" :labels="labels" />
+</template>
+
+<script>
+import CoreUtils from '~/mixins/CoreUtils'
+
+export default {
+  name: 'CChartLineSimple',
+  mixins: [CoreUtils],
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    datasets: Array,
+    // eslint-disable-next-line vue/require-default-prop
+    labels: [Array, String],
+    // eslint-disable-next-line vue/require-default-prop
+    options: Object,
+    // eslint-disable-next-line vue/require-default-prop
+    plugins: Array,
+    borderColor: {
+      type: String,
+      default: 'rgba(255,255,255,.55)'
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    },
+    dataPoints: {
+      type: Array,
+      default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
+    },
+    label: {
+      type: String,
+      default: 'Sales'
+    },
+    pointed: Boolean,
+    // eslint-disable-next-line vue/require-default-prop
+    pointHoverBackgroundColor: String
+  },
+  computed: {
+    pointHoverColor() {
+      if (this.pointHoverBackgroundColor) {
+        return this.pointHoverBackgroundColor
+      } else if (this.backgroundColor !== 'transparent') {
+        return this.backgroundColor
+      }
+      return this.borderColor
+    },
+    defaultDatasets() {
+      return [
+        {
+          data: this.dataPoints,
+          borderColor: this.getColor(this.borderColor),
+          backgroundColor: this.getColor(this.backgroundColor),
+          pointBackgroundColor: this.getColor(this.pointHoverColor),
+          pointHoverBackgroundColor: this.getColor(this.pointHoverColor),
+          label: this.label
+        }
+      ]
+    },
+    pointedOptions() {
+      return {
+        scales: {
+          xAxes: [
+            {
+              offset: true,
+              gridLines: {
+                color: 'transparent',
+                zeroLineColor: 'transparent'
+              },
+              ticks: {
+                fontSize: 2,
+                fontColor: 'transparent'
+              }
+            }
+          ],
+          yAxes: [
+            {
+              display: false,
+              ticks: {
+                display: false,
+                min: Math.min.apply(Math, this.dataPoints) - 5,
+                max: Math.max.apply(Math, this.dataPoints) + 5
+              }
+            }
+          ]
+        },
+        elements: {
+          line: {
+            borderWidth: 1
+          },
+          point: {
+            radius: 4,
+            hitRadius: 10,
+            hoverRadius: 4
+          }
+        }
+      }
+    },
+    straightOptions() {
+      return {
+        scales: {
+          xAxes: [
+            {
+              display: false
+            }
+          ],
+          yAxes: [
+            {
+              display: false
+            }
+          ]
+        },
+        elements: {
+          line: {
+            borderWidth: 2
+          },
+          point: {
+            radius: 0,
+            hitRadius: 10,
+            hoverRadius: 4
+          }
+        }
+      }
+    },
+    defaultOptions() {
+      const options = this.pointed ? this.pointedOptions : this.straightOptions
+      return Object.assign({}, options, {
+        maintainAspectRatio: false,
+        legend: {
+          display: false
+        }
+      })
+    },
+    computedDatasets() {
+      return this.deepObjectsMerge(this.defaultDatasets, this.datasets || {})
+    },
+    computedOptions() {
+      return this.deepObjectsMerge(this.defaultOptions, this.options || {})
+    }
+  }
+}
+</script>