cardamon 0.0.1

Cardamon is a tool to help development teams measure the power consumption and carbon emissions of their software.
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<template>
  <Line :data="chartData" :options="chartOptions" class="sparkline" />
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue'
import { Line } from 'vue-chartjs'
import {
  Chart as ChartJS,
  LineElement,
  PointElement,
  LinearScale,
  CategoryScale,
  Tooltip,
  ChartOptions
} from 'chart.js'

ChartJS.register(LineElement, PointElement, LinearScale, CategoryScale, Tooltip)

interface SparklineProps {
  data: number[]
}

const props = defineProps<SparklineProps>()

const determineLineColor = (data: number[]) => {
  if (data.length < 2) return 'rgba(0, 0, 0, 1)'

  return data[data.length - 1] > data[0] ? 'rgba(75, 192, 75, 1)' : 'rgba(255, 99, 132, 1)'
}

const chartData = computed(() => ({
  labels: props.data?.map((_, index) => index + 1) || [],
  datasets: [
    {
      data: props.data || [],
      borderColor: determineLineColor(props.data || []),
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderWidth: 2,
      pointRadius: 0
    }
  ]
}))

const chartOptions: ChartOptions<'line'> = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    x: {
      display: false
    },
    y: {
      display: false
    }
  },
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      enabled: true,
      mode: 'nearest',
      intersect: false,
      callbacks: {
        label: (context) => `CO2 Value: ${context.raw}`
      }
    }
  },
  elements: {
    line: {
      tension: 0.4
    }
  }
}
</script>

<style scoped>
.sparkline {
  height: 40px;
  width: 150px; /* Match the width of the fixed-width column in the table */
}
</style>