Последняя версия с сервера прошлого разработчика

nova/resources/js/components/Metrics/Base/PartitionMetric.vue

@@ -0,0 +1,198 @@
+<template>
+  <loading-card :loading="loading" class="px-6 py-4">
+    <h3 class="flex mb-3 text-base text-80 font-bold">
+      {{ title }}
+
+      <span class="ml-auto font-semibold text-70 text-sm"
+        >({{ formattedTotal }} {{ __('total') }})</span
+      >
+    </h3>
+
+    <div v-if="helpText" class="absolute pin-r pin-b p-2">
+      <tooltip trigger="hover" placement="top-start">
+        <icon
+          type="help"
+          viewBox="0 0 17 17"
+          height="16"
+          width="16"
+          class="cursor-pointer text-60 -mb-1"
+        />
+
+        <tooltip-content
+          slot="content"
+          v-html="helpText"
+          :max-width="helpWidth"
+        />
+      </tooltip>
+    </div>
+
+    <div class="min-h-90px">
+      <div class="overflow-hidden overflow-y-auto max-h-90px">
+        <ul class="list-reset">
+          <li
+            v-for="item in formattedItems"
+            class="text-xs text-80 leading-normal"
+          >
+            <span
+              class="inline-block rounded-full w-2 h-2 mr-2"
+              :style="{
+                backgroundColor: item.color,
+              }"
+            />{{ item.label }} ({{ item.value }} - {{ item.percentage }}%)
+          </li>
+        </ul>
+      </div>
+
+      <div
+        ref="chart"
+        :class="chartClasses"
+        style="
+          width: 90px;
+          height: 90px;
+          right: 20px;
+          bottom: 30px;
+          top: calc(50% + 15px);
+        "
+      />
+    </div>
+  </loading-card>
+</template>
+
+<script>
+import Chartist from 'chartist'
+import 'chartist/dist/chartist.min.css'
+
+const colorForIndex = index =>
+  [
+    '#F5573B',
+    '#F99037',
+    '#F2CB22',
+    '#8FC15D',
+    '#098F56',
+    '#47C1BF',
+    '#1693EB',
+    '#6474D7',
+    '#9C6ADE',
+    '#E471DE',
+  ][index]
+
+export default {
+  name: 'PartitionMetric',
+
+  props: {
+    loading: Boolean,
+    title: String,
+    helpText: {},
+    helpWidth: {},
+    chartData: Array,
+  },
+
+  data: () => ({ chartist: null }),
+
+  watch: {
+    chartData: function (newData, oldData) {
+      this.renderChart()
+    },
+  },
+
+  mounted() {
+    this.chartist = new Chartist.Pie(
+      this.$refs.chart,
+      this.formattedChartData,
+      {
+        donut: true,
+        donutWidth: 10,
+        donutSolid: true,
+        startAngle: 270,
+        showLabel: false,
+      }
+    )
+
+    this.chartist.on('draw', context => {
+      if (context.type === 'slice') {
+        context.element.attr({
+          style: `fill: ${context.meta.color} !important`,
+        })
+      }
+    })
+  },
+
+  methods: {
+    renderChart() {
+      this.chartist.update(this.formattedChartData)
+    },
+
+    getItemColor(item, index) {
+      return typeof item.color === 'string' ? item.color : colorForIndex(index)
+    },
+  },
+
+  computed: {
+    chartClasses() {
+      return [
+        'vertical-center',
+        'rounded-b-lg',
+        'ct-chart',
+        'mr-4',
+        this.currentTotal <= 0 ? 'invisible' : '',
+      ]
+    },
+
+    formattedChartData() {
+      return { labels: this.formattedLabels, series: this.formattedData }
+    },
+
+    formattedItems() {
+      return _(this.chartData)
+        .map((item, index) => {
+          return {
+            label: item.label,
+            value: item.value,
+            color: this.getItemColor(item, index),
+            percentage:
+              this.currentTotal > 0
+                ? Nova.formatNumber(
+                    new String(
+                      ((item.value * 100) / this.currentTotal).toFixed(2)
+                    )
+                  )
+                : '0',
+          }
+        })
+        .value()
+    },
+
+    formattedLabels() {
+      return _(this.chartData)
+        .map(item => item.label)
+        .value()
+    },
+
+    formattedData() {
+      return _(this.chartData)
+        .map((item, index) => {
+          return {
+            value: item.value,
+            meta: { color: this.getItemColor(item, index) },
+          }
+        })
+        .value()
+    },
+
+    formattedTotal() {
+      let total = this.currentTotal.toFixed(2)
+      let roundedTotal = Math.round(total)
+
+      if (roundedTotal.toFixed(2) == total) {
+        return Nova.formatNumber(new String(roundedTotal))
+      }
+
+      return Nova.formatNumber(new String(total))
+    },
+
+    currentTotal() {
+      return _.sumBy(this.chartData, 'value')
+    },
+  },
+}
+</script>