first commit

2026-03-01 00:35:36 +08:00 · 2021-11-17 18:24:56 +01:00
parent 28f44ca066
commit 0a54a0c881
69 changed files with 6127 additions and 0 deletions
@@ -0,0 +1,157 @@
+<template>
+  <div class="px-5 py-3">
+    <div class="flex flex-wrap justify-between items-end">
+      <div class="flex items-start">
+        <div class="text-3xl font-bold text-gray-800 mr-2">$1,482</div>
+        <div class="text-sm font-semibold text-white px-1.5 bg-yellow-500 rounded-full">-22%</div>
+      </div>
+      <div class="flex-grow ml-2 mb-1">
+        <ul ref="legend" class="flex flex-wrap justify-end"></ul>
+      </div>
+    </div>
+  </div>
+  <!-- Chart built with Chart.js 3 -->
+  <div class="flex-grow">
+    <canvas ref="canvas" :data="data" :width="width" :height="height"></canvas>
+  </div>  
+</template>
+
+<script>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { focusHandling } from 'cruip-js-toolkit'
+import {
+  Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
+} from 'chart.js'
+import 'chartjs-adapter-moment'
+
+// Import utilities
+import { tailwindConfig, formatValue } from '../utils/Utils'
+
+Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip)
+
+export default {
+  name: 'LineChart02',
+  props: ['data', 'width', 'height'],
+  setup(props) {
+
+    const canvas = ref(null)
+    const legend = ref(null)
+    let chart = null
+    
+    onMounted(() => {
+      const ctx = canvas.value
+      chart = new Chart(ctx, {
+        type: 'line',
+        data: props.data,
+        options: {
+          layout: {
+            padding: 20,
+          },
+          scales: {
+            y: {
+              grid: {
+                drawBorder: false,
+                beginAtZero: true,
+              },
+              ticks: {
+                maxTicksLimit: 5,
+                callback: (value) => formatValue(value),
+              },
+            },
+            x: {
+              type: 'time',
+              time: {
+                parser: 'MM-DD-YYYY',
+                unit: 'month',
+                displayFormats: {
+                  month: 'MMM YY',
+                },
+              },
+              grid: {
+                display: false,
+                drawBorder: false,
+              },
+              ticks: {
+                autoSkipPadding: 48,
+                maxRotation: 0,
+              },
+            },
+          },
+          plugins: {
+            legend: {
+              display: false,
+            },
+            tooltip: {
+              callbacks: {
+                title: () => false, // Disable tooltip title
+                label: (context) => formatValue(context.parsed.y),
+              },
+            },
+          },
+          interaction: {
+            intersect: false,
+            mode: 'nearest',
+          },
+          maintainAspectRatio: false,
+          resizeDelay: 200,
+        },
+        plugins: [{
+          id: 'htmlLegend',
+          afterUpdate(c, args, options) {
+            const ul = legend.value
+            if (!ul) return
+            // Remove old legend items
+            while (ul.firstChild) {
+              ul.firstChild.remove()
+            }
+            // Reuse the built-in legendItems generator
+            const items = c.options.plugins.legend.labels.generateLabels(c)
+            items.slice(0, 2).forEach((item) => {
+              const li = document.createElement('li')
+              li.style.marginLeft = tailwindConfig().theme.margin[3]
+              // Button element
+              const button = document.createElement('button')
+              button.style.display = 'inline-flex'
+              button.style.alignItems = 'center'
+              button.style.opacity = item.hidden ? '.3' : ''
+              button.onclick = () => {
+                c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex))
+                c.update()
+                focusHandling('outline')
+              }
+              // Color box
+              const box = document.createElement('span')
+              box.style.display = 'block'
+              box.style.width = tailwindConfig().theme.width[3]
+              box.style.height = tailwindConfig().theme.height[3]
+              box.style.borderRadius = tailwindConfig().theme.borderRadius.full
+              box.style.marginRight = tailwindConfig().theme.margin[2]
+              box.style.borderWidth = '3px'
+              box.style.borderColor = c.data.datasets[item.datasetIndex].borderColor
+              box.style.pointerEvents = 'none'
+              // Label
+              const label = document.createElement('span')
+              label.style.color = tailwindConfig().theme.colors.gray[500]
+              label.style.fontSize = tailwindConfig().theme.fontSize.sm[0]
+              label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight
+              const labelText = document.createTextNode(item.text)
+              label.appendChild(labelText)
+              li.appendChild(button)
+              button.appendChild(box)
+              button.appendChild(label)
+              ul.appendChild(li)
+            })
+          },
+        }],
+      })
+    })
+
+    onUnmounted(() => chart.destroy())
+
+    return {
+      canvas,
+      legend,
+    }
+  }
+}
+</script>